:root{
  /* REPRESENTっぽい「白×黒×赤」寄せ */
  --bg:#ffffff;
  --panel:#ffffff;
  --panel2:#f6f6f6;
  --text:#111111;
  --muted:#555555;
  --line:rgba(0,0,0,.10);

  /* represent.co.jp のアクセント赤（サイト画像から抽出: rgb(176,15,20)） */
  --accent:#b00f14;
  --accent2:#b00f14;

  --shadow: 0 20px 60px rgba(0,0,0,.15);
  --radius:18px;
  --container:1120px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: Inter, "Noto Sans JP", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  background: radial-gradient(1100px 520px at 70% -10%, rgba(176,15,20,.10), transparent 60%),
              radial-gradient(900px 520px at 10% 10%, rgba(176,15,20,.06), transparent 55%),
              var(--bg);
  color:var(--text);
  line-height:1.7;
}

a{color:inherit; text-decoration:none}
.container{max-width:var(--container); margin:0 auto; padding:0 20px}

.muted{color:var(--muted)}
.accent{color:var(--accent2)}

.topbar{
  position:sticky; top:0; z-index:50;
  background: rgba(255,255,255,.78);
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--line);
}
.topbar__inner{
  display:flex; align-items:center; gap:14px;
  padding:10px 0;
}
.badge{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 10px;
  border:1px solid rgba(176,15,20,.30);
  border-radius:999px;
  color:var(--accent2);
  font-weight:600;
  font-size:12px;
}
.topbar__text{color:var(--muted); font-size:13px}
.topbar__link{margin-left:auto; color:var(--accent2); font-weight:600; font-size:13px}

.header{
  position:sticky; top:44px; z-index:40;
  background: rgba(255,255,255,.70);
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--line);
}
.header__inner{
  display:flex; align-items:center; gap:20px;
  padding:14px 0;
}
.logo{display:flex; align-items:center; gap:10px}
.logo__mark{
  width:34px; height:34px;
  display:grid; place-items:center;
  border-radius:10px;
  background: linear-gradient(135deg, rgba(176,15,20,.98), rgba(226,74,79,.86));
  color:#ffffff;
  font-weight:800;
}
.logo__text{font-weight:800; letter-spacing:.02em}
.logo--sm .logo__mark{width:28px; height:28px; border-radius:9px}
.logo--sm .logo__text{font-weight:700}

.nav{display:flex; gap:18px; margin-left:10px}
.nav a{color:var(--muted); font-weight:600; font-size:14px}
.nav a:hover{color:var(--text)}

.header__cta{margin-left:auto; display:flex; align-items:center; gap:10px}

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 14px;
  border-radius:12px;
  font-weight:700;
  border:1px solid var(--line);
  background: rgba(255,255,255,.03);
  color:var(--text);
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
.btn:hover{transform: translateY(-1px); border-color: rgba(176,15,20,.22)}
.btn--primary{
  background: linear-gradient(135deg, rgba(176,15,20,.98), rgba(226,74,79,.86));
  color:#ffffff;
  border-color: transparent;
}
.btn--primary:hover{transform: translateY(-1px) scale(1.01)}
.btn--ghost{background: rgba(255,255,255,.02)}
.btn--lg{padding:14px 18px; border-radius:14px}
.btn--full{width:100%}

.hamburger{
  display:none;
  width:44px; height:44px;
  border-radius:12px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.92);
}
.hamburger span{
  display:block;
  width:18px; height:2px;
  margin:4px auto;
  background: var(--text);
  border-radius:2px;
  opacity:.9;
}

/* Drawer */
.drawer{position:fixed; inset:0; z-index:80; display:none}
.drawer.is-open{display:block;height:100vh;}
.drawer__overlay{position:absolute; inset:0; background: rgba(0,0,0,.5)}
.drawer__panel{
  position:absolute; right:0; top:0; height:100%; width:min(360px, 92vw);
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(12px);
  border-left:1px solid var(--line);
  padding:18px;
}
.drawer__close{
  width:44px; height:44px;
  border-radius:12px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.92);
  color: var(--text);
  font-size:22px;
}
.drawer__nav{display:grid; gap:10px; margin-top:12px}
.drawer__nav a{padding:10px 12px; border-radius:12px; border:1px solid transparent; color:var(--muted); font-weight:700}
.drawer__nav a:hover{border-color: rgba(100,210,255,.25); color:var(--text)}
.drawer__btn{margin-top:8px}

/* Hero */
.hero{padding:70px 0 10px}
.hero__inner{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap:34px;
  align-items:center;
}
.eyebrow{color:var(--muted); font-weight:700; letter-spacing:.05em; font-size:12px; text-transform:uppercase}
.hero__title{
  margin:10px 0 10px;
  font-size: clamp(28px, 3.2vw, 37px);
  line-height:1.15;
  letter-spacing:-.02em;
}
.hero__lead{color:var(--muted); margin:0 0 18px}
.hero__actions{display:flex; gap:12px; flex-wrap:wrap; margin:18px 0 16px}

.hero__meta{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:12px;
  margin-top:18px;
}
.metaCard{
  border:1px solid var(--line);
  background: rgba(255,255,255,.92);
  border-radius: var(--radius);
  padding:12px 12px;
}
.metaCard__label{color:var(--muted); font-size:12px; font-weight:700}
.metaCard__value{font-weight:800}

.hero__visual{position:relative}
.glass{
  border-radius: 22px;
  border:1px solid rgba(176,15,20,.14);
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
  box-shadow: var(--shadow);
  overflow:hidden;
}
.glass__top{
  display:flex; align-items:center; gap:8px;
  padding:12px 14px;
  border-bottom:1px solid var(--line);
}
.dot{width:10px; height:10px; border-radius:999px; background: rgba(0,0,0,.18)}
.glass__title{margin-left:8px; color:var(--muted); font-weight:700; font-size:12px}
.glass__body{padding:16px}
.codeLine{height:10px; border-radius:8px; background: rgba(176,15,20,.12); margin:10px 0}
.codeLine.w80{width:80%}
.codeLine.w55{width:55%}
.codeLine.w90{width:90%}
.codeLine.w60{width:60%}
.divider{height:1px; background: var(--line); margin:14px 0}
.chipRow{display:flex; flex-wrap:wrap; gap:8px}
.chip{
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(176,15,20,.18);
  background: rgba(176,15,20,.10);
  color: var(--accent2);
  font-weight:700;
  font-size:12px;
}
.hint{
  margin-top:14px;
  color: var(--muted);
  font-weight:700;
}
.glow{
  position:absolute; inset:-40px -60px -40px -60px;
  background: radial-gradient(450px 260px at 60% 30%, rgba(176,15,20,.12), transparent 60%),
              radial-gradient(340px 220px at 30% 70%, rgba(176,15,20,.08), transparent 60%);
  filter: blur(18px);
  z-index:-1;
}

/* Sections */
.section{padding:64px 0}
.section--alt{
  background: linear-gradient(180deg, rgba(0,0,0,.02), rgba(0,0,0,0));
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.sectionHead{margin-bottom:22px}
.sectionHead h2{
  margin:0 0 8px;
  font-size: clamp(20px, 2.4vw, 30px);
  line-height:1.25;
  letter-spacing:-.01em;
}
.sectionHead p{margin:0; color:var(--muted)}

.grid3{display:grid; grid-template-columns:repeat(3, 1fr); gap:14px}
.grid2{display:grid; grid-template-columns:repeat(2, 1fr); gap:14px}

.card{
  border:1px solid var(--line);
  background: rgba(255,255,255,.92);
  border-radius: var(--radius);
  padding:18px;
}
.card h3{margin:0 0 8px; font-size:16px}
.card p{margin:0; color:var(--muted)}

.listCard{
  border:1px solid var(--line);
  background: rgba(255,255,255,.92);
  border-radius: var(--radius);
  padding:18px;
}
.listCard h3{margin:0 0 10px}
.listCard ul{margin:0; padding-left:18px; color:var(--muted)}
.listCard li{margin:6px 0}

.note{
  margin-top:14px;
  border:1px dashed rgba(176,15,20,.18);
  border-radius: var(--radius);
  padding:14px 16px;
  background: rgba(176,15,20,.05);
  color: var(--muted);
}

/* Pricing */
.pricing{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:14px;
  align-items:stretch;
}
.priceCard{
  position:relative;
  border:1px solid var(--line);
  background: rgba(255,255,255,.92);
  border-radius: 20px;
  padding:18px;
  display:flex;
  flex-direction:column;
  gap:14px;
}
.priceCard__head h3{margin:0}
.price{margin:6px 0 0; font-weight:900; font-size:28px; letter-spacing:-.02em}
.price span{font-size:14px; color:var(--muted); font-weight:700}
.ribbon{
  position:absolute;
  top:12px; right:12px;
  padding:6px 10px;
  font-size:12px;
  font-weight:800;
  border-radius:999px;
  background: rgba(176,15,20,.10);
  border:1px solid rgba(176,15,20,.30);
  color:var(--accent2);
}
.priceCard--featured{
  border-color: rgba(176,15,20,.22);
  background: linear-gradient(180deg, rgba(176,15,20,.06), rgba(255,255,255,.88));
}
.check{margin:0; padding-left:18px; color:var(--muted)}
.check li{margin:8px 0}

.miniCallout{
  margin-top:18px;
  border:1px solid rgba(100,210,255,.22);
  background: rgba(255,255,255,.92);
  border-radius: 20px;
  padding:18px;
  display:flex;
  gap:16px;
  align-items:center;
  justify-content:space-between;
}
.miniCallout__text h3{margin:0 0 6px}
.miniCallout__text p{margin:0; color:var(--muted)}
.miniCallout__cta{display:flex; gap:10px; flex-wrap:wrap}

/* Flow */
.flow{list-style:none; margin:0; padding:0; display:grid; gap:12px}
.flow__item{
  display:flex; gap:14px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.92);
  border-radius: var(--radius);
  padding:16px;
}
.flow__num{
  width:38px; height:38px;
  border-radius: 12px;
  display:grid; place-items:center;
  font-weight:900;
  color:#071225;
  background: linear-gradient(135deg, rgba(176,15,20,.98), rgba(226,74,79,.86));
}
.flow__body h3{margin:0 0 6px}
.flow__body p{margin:0; color:var(--muted)}

/* FAQ */
.faq{display:grid; gap:10px}
.faqItem{
  border:1px solid var(--line);
  background: rgba(255,255,255,.92);
  border-radius: var(--radius);
  padding:12px 14px;
}
.faqItem summary{
  cursor:pointer;
  font-weight:800;
  list-style:none;
}
.faqItem summary::-webkit-details-marker{display:none}
.faqItem__body{color:var(--muted); padding-top:10px}

/* CTA */
.cta{
  padding:56px 0;
  border-top:1px solid var(--line);
  background: radial-gradient(900px 420px at 50% 0%, rgba(176,15,20,.10), transparent 60%);
}
.cta__inner{
  display:flex;
  gap:18px;
  align-items:center;
  justify-content:space-between;
  border:1px solid rgba(176,15,20,.14);
  background: rgba(255,255,255,.92);
  border-radius: 22px;
  padding:22px;
}
.cta__inner h2{margin:0 0 6px}
.cta__inner p{margin:0; color:var(--muted)}
.cta__buttons{display:flex; gap:10px; flex-wrap:wrap}

/* Footer */
.footer{
  padding:26px 0;
  border-top:1px solid var(--line);
}
.footer__inner{display:flex; gap:14px; align-items:center; justify-content:space-between}
.footer__right{display:flex; gap:14px; flex-wrap:wrap}

/* Responsive */
@media (max-width: 1024px){
  .hero__inner{grid-template-columns:1fr; gap:18px}
  .pricing{grid-template-columns:repeat(2, 1fr)}
}
@media (max-width: 720px){
  .nav{display:none}
  .hamburger{display:inline-grid; place-items:center}
  .grid3{grid-template-columns:1fr}
  .grid2{grid-template-columns:1fr}
  .pricing{grid-template-columns:1fr}
  .hero{padding:56px 0 10px}
  .hero__meta{grid-template-columns:1fr; gap:10px}
  .miniCallout{flex-direction:column; align-items:flex-start}
  .cta__inner{flex-direction:column; align-items:flex-start}
  .footer__inner{flex-direction:column; align-items:flex-start}
}


/* ===========================
   Premium spacing & motion
=========================== */
.section{padding:92px 0}
.hero{padding:92px 0 24px}
.sectionHead{margin-bottom:34px}
.sectionHead p{max-width: 62ch}

.grid3{gap:22px}
.grid2{gap:22px}
.pricing{gap:22px}
.flow{gap:16px}
.flow__item{padding:20px}
.card,.listCard,.priceCard,.faqItem,.flow__item,.miniCallout,.cta__inner{
  border-radius: 22px;
}
.card{padding:24px}
.listCard{padding:24px}
.priceCard{padding:24px}
.miniCallout{padding:22px}
.cta__inner{padding:26px}

.hero__lead{font-size:16px}
.price{font-size:30px}
.nav a{letter-spacing:.02em}

@media (max-width: 720px){
  .section{padding:72px 0}
  .hero{padding:72px 0 16px}
}

/* ===========================
   Button: underline draw + shine
=========================== */
.btn{
  position:relative;
  overflow:hidden;
  isolation:isolate;
}
.btn::after{
  content:"";
  position:absolute;
  left:14px; right:14px;
  bottom:10px;
  height:1px;
  background: currentColor;
  opacity:.0;
  transform: scaleX(.15);
  transform-origin:left;
  transition: transform .25s ease, opacity .25s ease;
}
.btn:hover::after{
  opacity:.75;
  transform: scaleX(1);
}
.btn--primary::after{
  background: rgba(255,255,255,.92);
  bottom:11px;
  opacity:0;
}
.btn--ghost::after{
  opacity:0;
}

/* subtle shine */
.btn::before{
  content:"";
  position:absolute;
  inset:-40% -60%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.25), transparent);
  transform: translateX(-60%) rotate(12deg);
  transition: transform .55s ease;
  z-index:-1;
}
.btn:hover::before{
  transform: translateX(60%) rotate(12deg);
}
.btn:active{transform: translateY(0) scale(.99)}

/* Focus: high trust */
.btn:focus-visible{
  outline: 2px solid rgba(176,15,20,.35);
  outline-offset: 2px;
}

/* ===========================
   Link underline (nav & footer)
=========================== */
.nav a, .footer__right a, .topbar__link{
  position:relative;
}
.nav a::after, .footer__right a::after, .topbar__link::after{
  content:"";
  position:absolute;
  left:0; right:0;
  bottom:-6px;
  height:1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin:left;
  transition: transform .25s ease;
  opacity:.9;
}
.nav a:hover::after, .footer__right a:hover::after, .topbar__link:hover::after{
  transform: scaleX(1);
}

/* ===========================
   Cards: premium hover lift + border glow
=========================== */
.card,.listCard,.priceCard,.flow__item,.faqItem{
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.card:hover,.listCard:hover,.priceCard:hover,.flow__item:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 55px rgba(0,0,0,.12);
  border-color: rgba(176,15,20,.18);
}
.faqItem[open]{
  border-color: rgba(176,15,20,.20);
  box-shadow: 0 14px 45px rgba(0,0,0,.10);
}

/* ===========================
   Scroll reveal (JS)
=========================== */
[data-reveal]{
  opacity:0;
  transform: translateY(10px);
  transition: opacity .6s ease, transform .6s ease;
  will-change: opacity, transform;
}
.is-revealed{
  opacity:1;
  transform: translateY(0);
}

/* Reduce motion preference */
@media (prefers-reduced-motion: reduce){
  [data-reveal]{transition:none}
  .btn::before,.btn::after{transition:none}
  .card,.listCard,.priceCard,.flow__item,.faqItem{transition:none}
}

/* ===========================
   Header shadow on scroll
=========================== */
.header.is-scrolled{
  box-shadow: 0 14px 40px rgba(0,0,0,.10);
}


/* ===========================
   REPRESENT寄せ：Typography system
=========================== */

/* Font stack */
body{
  font-family: "Noto Sans JP", Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  letter-spacing: .01em;
  line-height: 1.9;
  color: var(--text);
}

/* Headings: unify weight + tracking */
h1,h2,h3{
  font-family: "Noto Serif JP","Noto Sans JP", Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  letter-spacing: .03em;
  font-weight: 700;
}
.hero__title{
  letter-spacing: .035em;
  font-weight: 700;
}
.sectionHead h2{
  letter-spacing: .03em;
  font-weight: 700;
}

/* Smaller headings */
.card h3, .listCard h3, .priceCard__head h3, .flow__body h3{
  font-family: "Noto Sans JP", Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  letter-spacing: .02em;
  font-weight: 800;
}

/* Paragraph width: magazine-like */
.hero__lead,
.sectionHead p,
.card p,
.listCard ul,
.note p,
.faqItem__body p,
.flow__body p{
  max-width: 62ch;
}

/* Body text rhythm */
p{margin:0}
.hero__lead{margin: 0 0 22px}
.sectionHead p{margin-top: 10px}
.card p{margin-top: 8px}
.note p{margin:0}
.faqItem__body{padding-top: 12px}
.faqItem__body p{margin:0}

/* Lists spacing */
.listCard ul{line-height: 1.9}
.listCard li{margin: 8px 0}

/* Section spacing refinement (magazine) */
.sectionHead{max-width: 74ch}
.sectionHead h2{margin-bottom: 10px}
.sectionHead p{color: rgba(0,0,0,.62)}

/* Muted tone slightly lighter */
.muted{color: rgba(0,0,0,.55)}

/* Pricing text rhythm */
.check{line-height: 1.9}
.check li{margin: 10px 0}

/* CTA headline feel */
.cta__inner h2{
  letter-spacing: .03em;
  font-weight: 700;
}
.cta__inner p{max-width: 60ch}

/* Visual polish: thin hairline borders */
.card,.listCard,.priceCard,.faqItem,.flow__item,.miniCallout,.cta__inner{
  border-color: rgba(0,0,0,.09);
}

/* Responsives */
@media (max-width: 720px){
  body{line-height: 1.85}
  .hero__lead, .sectionHead p{max-width: 56ch}
}


/* ===========================
   Mobile polish & fixes
=========================== */
@media (max-width: 720px){
  /* prevent sticky bars from squeezing viewport */
  .topbar{position:relative}
  .header{position:sticky; top:0}

  /* hero buttons: full-width & tidy */
  .hero__actions{gap:10px}
  .hero__actions .btn{width:100%}
  .btn--lg{padding:14px 16px}

  /* meta cards already stacked; tighten a bit */
  .metaCard{padding:14px}

  /* typography tweaks for SP readability */
  h1,h2,h3{letter-spacing:.02em}
  body{letter-spacing:.008em}

  /* keep sections clean */
  .sectionHead{margin-bottom:26px}
  .card,.listCard,.priceCard{padding:22px}

  /* reserve space for bottom bar */
  body{padding-bottom:86px}
}

/* ===========================
   Mobile LINE sticky CTA
=========================== */
.mobileLineBar{
  position:fixed;
  left:0; right:0;
  bottom:0;
  padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  background: rgba(255,255,255,.82);
  backdrop-filter: blur(10px);
  border-top: 1px solid rgba(0,0,0,.10);
  z-index: 120;
  display:none;
}
.mobileLineBar__btn{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:52px;
  border-radius: 14px;
  background: #06C755; /* LINE green */
  color:#fff;
  font-weight: 900;
  letter-spacing: .02em;
  box-shadow: 0 12px 35px rgba(0,0,0,.14);
  position:relative;
  overflow:hidden;
}
.mobileLineBar__btn::after{
  content:"";
  position:absolute;
  left:18px; right:18px;
  bottom:12px;
  height:1px;
  background: rgba(255,255,255,.9);
  transform: scaleX(.15);
  transform-origin:left;
  opacity:.0;
  transition: transform .25s ease, opacity .25s ease;
}
.mobileLineBar__btn:hover::after{
  opacity:.8;
  transform: scaleX(1);
}
@media (max-width: 720px){
  .mobileLineBar{display:block}
}

/* ===========================
   Parallax targets (subtle)
=========================== */
[data-parallax]{will-change: transform}


/* ===========================
   Layout rework: fixed header (no double sticky)
=========================== */
:root{ --headerH: 72px; }

.topbar{
  position: static;
  border-bottom: 1px solid rgba(0,0,0,.08);
}
.header{
  position: fixed;
  top:0;
  left:0;
  right:0;
  z-index: 140;
}
.header__inner{ padding: 14px 0; }
main{ padding-top: var(--headerH); }

/* ensure drawer covers header */
.drawer{z-index: 200}

/* Mobile: simplify */
@media (max-width: 720px){
  .header__inner{padding: 12px 0;}
  :root{ --headerH: 116px; } /* header + topbar */
  main{padding-top: var(--headerH);}
}


/* ===========================
   SP Header fix (wrap/崩れ対策)
=========================== */
@media (max-width: 720px){
  /* Topbar: compact */
  .topbar__inner{gap:10px; padding:10px 0; flex-wrap:nowrap}
  .topbar__text{display:none}
  .topbar__link{display:none}
  .badge{
    padding:6px 10px;
    font-size:12px;
    border-radius:999px;
    white-space:nowrap;
  }

  /* Header row: keep single line */
  .header__inner{
    display:flex;
    align-items:center;
    gap:10px;
  }
  .logo{gap:8px; min-width:0}
  .logo__mark{width:28px; height:28px; border-radius:10px}
  .logo__text{
    font-size:15px;
    letter-spacing:.01em;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    max-width: 44vw;
  }

  .header__cta{
    margin-left:auto;
    display:flex;
    align-items:center;
    gap:8px;
    flex-wrap:nowrap;
  }
  /* Hide secondary CTA on SP to avoid wrap */
  .header__cta .btn--ghost{display:none}

  /* Primary CTA: compact and no wrapping */
  .header__cta .btn--primary{
    padding:10px 12px;
    border-radius:14px;
    font-size:12px;
    font-weight:900;
    white-space:nowrap;
  }

  /* Hamburger always visible on SP */
  .hamburger{display:inline-grid}
  .hamburger{width:44px; height:44px}

  /* Prevent header overlap with content; JS also sets --headerH */
  main{padding-top: var(--headerH);}
}


/* ===========================
   Blog styles (Posts)
=========================== */
.blogWrap{
  padding: 150px 0;
}
.blogHead{
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 20px 22px;
}
.blogHead h1{
  margin: 0 0 10px;
  font-family: "Noto Serif JP","Noto Sans JP", Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  letter-spacing: .03em;
  font-weight: 700;
}
.blogHead p{margin:0; color: rgba(0,0,0,.60); max-width: 62ch}

.postGrid{
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 20px;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.postCard{
  border: 1px solid rgba(0,0,0,.09);
  background: rgba(255,255,255,.92);
  border-radius: 22px;
  overflow:hidden;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.postCard:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 55px rgba(0,0,0,.12);
  border-color: rgba(176,15,20,.18);
}
.postThumb{
  aspect-ratio: 16/9;
  background: rgba(0,0,0,.05);
}
.postThumb img{width:100%; height:100%; object-fit:cover; display:block}
.postBody{padding:18px 18px 20px}
.postMeta{font-size:12px; color: rgba(0,0,0,.55); font-weight:700; letter-spacing:.02em}
.postTitle{
  margin:10px 0 0;
  font-size: 16px;
  font-weight: 900;
  letter-spacing: .02em;
  line-height: 1.5;
}
.postExcerpt{margin:10px 0 0; color: rgba(0,0,0,.60); max-width: 62ch}

.articleWrap{
  max-width: 860px;
  margin: 0 auto;
  padding: 100px 20px 72px;
}
.articleTitle{
  margin: 0 0 12px;
  font-size: clamp(22px, 2.6vw, 34px);
  line-height: 1.25;
  letter-spacing: .03em;
}
.articleMeta{color: rgba(0,0,0,.55); font-weight:700; font-size: 13px}
.entryContent{
  margin-top: 26px;
  line-height: 1.95;
  letter-spacing: .01em;
}
.entryContent > *{margin: 18px 0}
.entryContent h2{
  margin-top: 34px;
  font-size: 22px;
}
.entryContent h3{margin-top: 26px; font-size: 18px}
.entryContent a{
  color: var(--accent);
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size .25s ease;
}
.entryContent a:hover{background-size: 100% 1px}
.entryContent blockquote{
  padding: 16px 18px;
  border-left: 3px solid rgba(176,15,20,.35);
  background: rgba(0,0,0,.02);
  border-radius: 18px;
  color: rgba(0,0,0,.70);
}
.pagination{
  display:flex; gap:10px; flex-wrap:wrap;
  justify-content:center;
  margin-top: 32px;
}
.pagination a, .pagination span{
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.82);
  font-weight: 800;
}
.pagination .current{
  background: rgba(176,15,20,.08);
  border-color: rgba(176,15,20,.18);
}
@media (max-width: 1024px){
  .postGrid{grid-template-columns: repeat(2, 1fr)}
}
@media (max-width: 720px){
  .postGrid{grid-template-columns: 1fr}
  .blogWrap{padding: 42px 0}
  .articleWrap{padding: 42px 20px 64px}
}


/* =====================================
   CF7 フォームデザイン（form直当て）
===================================== */

/* フォーム全体 */
form.wpcf7-form {
  max-width: 760px;
  margin: 150px auto;
  padding: 40px;
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.05);
  box-sizing: border-box;
}

/* 各ブロック（CF7は<p>で囲われる） */
form.wpcf7-form > p {
  margin: 0 0 22px;
}

/* ラベル */
form.wpcf7-form label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: #222;
  line-height: 1.6;
}

/* 入力欄共通 */
form.wpcf7-form input[type="text"],
form.wpcf7-form input[type="email"],
form.wpcf7-form select,
form.wpcf7-form textarea {
  width: 100%;
  margin-top: 10px;
  padding: 14px 16px;
  font-size: 15px;
  border-radius: 10px;
  border: 1px solid #dcdcdc;
  background: #f8f8f8;
  box-sizing: border-box;
  transition: all 0.25s ease;
}

/* フォーカス時 */
form.wpcf7-form input:focus,
form.wpcf7-form select:focus,
form.wpcf7-form textarea:focus {
  outline: none;
  border-color: #009cd0;
  background: #fff;
  box-shadow: 0 0 0 4px rgba(0, 156, 208, 0.15);
}

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

/* セレクト矢印簡易調整 */
form.wpcf7-form select {
  appearance: none;
  padding-right: 40px;
}

/* 送信ボタン */
form.wpcf7-form .wpcf7-submit {
  width: 100%;
  padding: 16px;
  font-size: 16px;
  font-weight: 700;
  border-radius: 999px;
  border: none;
  background: #009cd0;
  color: #fff;
  cursor: pointer;
  transition: all 0.25s ease;
}

form.wpcf7-form .wpcf7-submit:hover {
  transform: translateY(-2px);
  background: #007fa8;
}

/* スピナー位置 */
form.wpcf7-form .wpcf7-spinner {
  margin-left: 10px;
}

/* バリデーションエラー */
form.wpcf7-form .wpcf7-not-valid-tip {
  font-size: 12px;
  color: #e53935;
  margin-top: 6px;
}

/* メッセージ表示 */
form.wpcf7-form .wpcf7-response-output {
  margin-top: 20px;
  padding: 14px 16px;
  border-radius: 8px;
  font-size: 14px;
}

/* スマホ調整 */
@media (max-width: 768px) {
  form.wpcf7-form {
    margin: 30px 16px;
    padding: 25px;
  }
}



/* =========================
   FAQ サンクスページ
========================= */
.faqThanks{
  max-width: 760px;
  margin: 60px auto;
  padding: 44px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 15px 40px rgba(0,0,0,.05);
  box-sizing: border-box;
  text-align: center;
}

.faqThanks__ttl{
  font-size: 26px;
  line-height: 1.4;
  margin: 0 0 14px;
}

.faqThanks__txt{
  font-size: 15px;
  line-height: 1.9;
  margin: 0 0 22px;
  color: #333;
}

.faqThanks__box{
  padding: 16px 18px;
  background: #f7f7f7;
  border-radius: 12px;
  margin: 0 0 26px;
}

.faqThanks__note{
  margin: 0;
  font-size: 13px;
  line-height: 1.8;
  color: #444;
}

.faqThanks__btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 240px;
  padding: 14px 22px;
  border-radius: 999px;
  background: #009cd0;
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  transition: transform .2s, filter .2s;
}

.faqThanks__btn:hover{
  transform: translateY(-2px);
  filter: brightness(.95);
}

@media (max-width: 768px){
  .faqThanks{
    margin: 30px 16px;
    padding: 28px 20px;
  }
  .faqThanks__ttl{ font-size: 22px; }
}




/* FAQ Archive */
.faqArchive{ padding: 60px 16px; }
.faqArchive__inner{ max-width: 860px; margin: 0 auto; }
.faqArchive__ttl{ font-size: 28px; margin: 0 0 18px; }
.faqArchive__list{ list-style:none; padding:0; margin:0; border-top:1px solid #e6e6e6; }
.faqArchive__item{ border-bottom:1px solid #e6e6e6; }
.faqArchive__link{ display:block; padding:16px 8px; text-decoration:none; }
.faqArchive__link:hover{ text-decoration: underline; }
.faqArchive__pager{ margin-top: 20px; }

/* FAQ Single */
.faqSingle{ padding: 60px 16px; }
.faqSingle__inner{ max-width: 860px; margin: 0 auto; }
.faqSingle__head{ margin-bottom: 18px; }
.faqSingle__ttl{ font-size: 26px; margin: 0; }
.faqSingle__label{ font-weight: 700; margin: 0 0 8px; }
.faqSingle__question,
.faqSingle__answer{
  background:#fff;
  border:1px solid #e6e6e6;
  border-radius: 14px;
  padding: 18px;
  margin: 0 0 14px;
}
.faqSingle__body{ line-height: 1.9; }
.faqSingle__back{ margin-top: 18px; }


/* ===== FAQ Archive ===== */
.faqArchive{ padding: 56px 16px; }
.faqArchive__inner{ max-width: 920px; margin: 0 auto; }
.faqArchive__ttl{ font-size: 28px; margin: 0 0 8px; }
.faqArchive__sub{ margin: 0 0 18px; opacity: .75; }

/* Filter */
.faqFilter{
  background:#fff;
  border:1px solid #e6e6e6;
  border-radius: 14px;
  padding: 16px;
  margin: 0 0 18px;
}
.faqFilter__row{
  display: grid;
  grid-template-columns: 1fr 1.2fr 0.8fr;
  gap: 12px;
}
.faqFilter__label{ display:block; font-size: 12px; font-weight: 700; margin: 0 0 6px; }
.faqFilter__control{
  width: 100%;
  padding: 12px 12px;
  border: 1px solid #d9d9d9;
  border-radius: 10px;
  background: #f7f7f7;
  box-sizing: border-box;
}
.faqFilter__actions{
  display:flex;
  gap: 12px;
  align-items:center;
  margin-top: 12px;
}
.faqFilter__btn{
  padding: 12px 18px;
  border-radius: 999px;
  border: none;
  background: #009cd0;
  color: #fff;
  font-weight: 700;
  cursor: pointer;
}
.faqFilter__reset{ text-decoration: none; opacity: .75; }
.faqFilter__reset:hover{ text-decoration: underline; }

/* List (title only) */
.faqList{ list-style:none; padding:0; margin:0; border-top:1px solid #e6e6e6; }
.faqList__item{
  display:flex;
  align-items:center;
  gap: 10px;
  border-bottom:1px solid #e6e6e6;
  padding: 14px 6px;
}
.faqList__link{ flex: 1; text-decoration:none; }
.faqList__link:hover{ text-decoration: underline; }
.faqList__cat{
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  background: #f1f7fb;
}

/* Pager */
.faqPager{ margin-top: 18px; }

/* Empty */
.faqEmpty{
  padding: 18px;
  background: #fff;
  border:1px solid #e6e6e6;
  border-radius: 14px;
}

@media (max-width: 820px){
  .faqFilter__row{ grid-template-columns: 1fr; }
}



/* ===== FAQ Archive (カテゴリごと) ===== */
.faqArchive{ padding: 56px 16px; }
.faqArchive__inner{ max-width: 980px; margin: 0 auto; }
.faqArchive__ttl{ font-size: 28px; margin: 0 0 8px; }
.faqArchive__sub{ margin: 0 0 18px; opacity: .75; }

/* Top filter */
.faqTopFilter{
  background:#fff;
  border:1px solid #e6e6e6;
  border-radius: 14px;
  padding: 14px;
  margin: 0 0 22px;
}
.faqTopFilter__row{
  display: grid;
  grid-template-columns: 1fr 180px 120px;
  gap: 10px;
}
.faqTopFilter__search,
.faqTopFilter__sort{
  width: 100%;
  padding: 12px 12px;
  border: 1px solid #d9d9d9;
  border-radius: 10px;
  background: #f7f7f7;
  box-sizing: border-box;
}
.faqTopFilter__btn{
  border: none;
  border-radius: 10px;
  background: #009cd0;
  color: #fff;
  font-weight: 700;
  cursor: pointer;
}
.faqTopFilter__reset{
  display: inline-block;
  margin-top: 10px;
  text-decoration: none;
  opacity: .75;
}
.faqTopFilter__reset:hover{ text-decoration: underline; }

/* Category section */
.faqSection{ margin: 0 0 26px; }
.faqSection__ttl{
  margin: 0 0 10px;
  font-size: 20px;
  padding-left: 10px;
  border-left: 4px solid #009cd0;
}

/* List (title only) */
.faqList{ list-style:none; padding:0; margin:0; border-top:1px solid #e6e6e6; background:#fff; border-radius: 14px; overflow: hidden; }
.faqList__item{ border-bottom:1px solid #e6e6e6; }
.faqList__item:last-child{ border-bottom:none; }
.faqList__link{
  display:block;
  padding: 14px 14px;
  text-decoration:none;
}
.faqList__link:hover{ text-decoration: underline; }

/* Empty */
.faqEmpty{
  padding: 18px;
  background: #fff;
  border:1px solid #e6e6e6;
  border-radius: 14px;
}

@media (max-width: 820px){
  .faqTopFilter__row{ grid-template-columns: 1fr; }
  .faqTopFilter__btn{ padding: 12px; }
}

/* ===== FAQ Category Nav ===== */
.faqNav{
  background:#fff;
  border:1px solid #e6e6e6;
  border-radius: 14px;
  padding: 16px;
  margin: 0 0 22px;
}
.faqNav__ttl{
  margin: 0 0 10px;
  font-weight: 700;
  font-size: 14px;
}
.faqNav__list{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
}
.faqNav__link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 10px 14px;
  border-radius: 999px;
  text-decoration:none;
  background:#f1f7fb;
  border:1px solid #dbeaf3;
  transition: transform .15s, filter .15s;
}
.faqNav__link:hover{
  transform: translateY(-1px);
  filter: brightness(.98);
}


/* =========================
   Apply Form
========================= */
.applyLead {
  max-width: 760px;
  margin: 0 auto 32px;
  text-align: center;
}

.applyLead h1 {
  margin: 0 0 12px;
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1.3;
  font-weight: 700;
  color: #111827;
}

.applyLead p {
  margin: 0;
  font-size: 15px;
  line-height: 1.9;
  color: #4b5563;
}

.applyForm {
  max-width: 760px;
  margin: 0 auto;
  padding: 32px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 20px;
  box-shadow: 0 12px 40px rgba(15, 23, 42, 0.06);
}

.applyForm__row {
  margin-bottom: 24px;
}

.applyForm__row label {
  display: block;
  margin-bottom: 10px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.6;
  color: #111827;
}

.applyForm .required {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  background: #111827;
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  vertical-align: middle;
}

/* 入力欄共通 */
.applyForm input[type="text"],
.applyForm input[type="email"],
.applyForm input[type="tel"],
.applyForm textarea,
.applyForm select {
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  padding: 16px 18px;
  border: 1px solid #d1d5db;
  border-radius: 14px;
  background: #fff;
  font-size: 15px;
  line-height: 1.7;
  color: #111827;
  box-sizing: border-box;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
}

.applyForm input[type="text"]::placeholder,
.applyForm input[type="email"]::placeholder,
.applyForm input[type="tel"]::placeholder,
.applyForm textarea::placeholder {
  color: #9ca3af;
}

.applyForm input[type="text"]:focus,
.applyForm input[type="email"]:focus,
.applyForm input[type="tel"]:focus,
.applyForm textarea:focus,
.applyForm select:focus {
  outline: none;
  border-color: #2563eb;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12);
}

/* readonlyのプラン表示 */
.applyForm input[readonly] {
  background: #f9fafb;
  color: #374151;
  font-weight: 600;
  cursor: default;
}

/* textarea */
.applyForm textarea {
  min-height: 180px;
  resize: vertical;
}

/* CF7のエラーメッセージ */
.applyForm .wpcf7-not-valid-tip {
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.5;
  color: #dc2626;
}

.applyForm .wpcf7-not-valid {
  border-color: #dc2626 !important;
  background: #fffafa;
}

.applyForm .wpcf7 form .wpcf7-response-output,
.applyForm .wpcf7-response-output {
  margin: 24px 0 0;
  padding: 14px 16px;
  border-radius: 12px;
  font-size: 14px;
  line-height: 1.7;
}

.applyForm .wpcf7 form.sent .wpcf7-response-output {
  border: 1px solid #86efac;
  background: #f0fdf4;
  color: #166534;
}

.applyForm .wpcf7 form.invalid .wpcf7-response-output,
.applyForm .wpcf7 form.unaccepted .wpcf7-response-output,
.applyForm .wpcf7 form.failed .wpcf7-response-output {
  border: 1px solid #fecaca;
  background: #fef2f2;
  color: #991b1b;
}

/* acceptance */
.applyForm .wpcf7-acceptance {
  display: block;
}

.applyForm .wpcf7-list-item {
  display: block;
  margin: 0;
}

.applyForm .wpcf7-list-item label {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.8;
  color: #374151;
  cursor: pointer;
}

.applyForm .wpcf7-list-item input[type="checkbox"] {
  margin: 4px 0 0;
  accent-color: #111827;
  transform: scale(1.15);
  flex-shrink: 0;
}

/* submit */
.applyForm__submit {
  margin-top: 32px;
}

.applyForm input[type="submit"],
.applyForm button[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 58px;
  padding: 16px 24px;
  border: none;
  border-radius: 999px;
  background: linear-gradient(135deg, #111827 0%, #1f2937 100%);
  color: #ffffff;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.2;
  cursor: pointer;
  transition: transform 0.25s ease, box-shadow 0.25s ease, opacity 0.25s ease;
  box-shadow: 0 10px 25px rgba(17, 24, 39, 0.18);
}

.applyForm input[type="submit"]:hover,
.applyForm button[type="submit"]:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 30px rgba(17, 24, 39, 0.22);
}

.applyForm input[type="submit"]:active,
.applyForm button[type="submit"]:active {
  transform: translateY(0);
}

.applyForm .wpcf7-spinner {
  display: block;
  margin: 14px auto 0;
}

/* フォーム下の補足 */
.applyFormNote {
  max-width: 760px;
  margin: 18px auto 0;
  font-size: 13px;
  line-height: 1.8;
  color: #6b7280;
}

/* =========================
   Responsive
========================= */
@media (max-width: 767px) {
  .applyLead {
    margin-bottom: 24px;
    text-align: left;
  }

  .applyLead h1 {
    font-size: 28px;
  }

  .applyLead p {
    font-size: 14px;
    line-height: 1.8;
  }

  .applyForm {
    padding: 22px 16px;
    border-radius: 16px;
  }

  .applyForm__row {
    margin-bottom: 20px;
  }

  .applyForm__row label {
    margin-bottom: 8px;
    font-size: 13px;
  }

  .applyForm input[type="text"],
  .applyForm input[type="email"],
  .applyForm input[type="tel"],
  .applyForm textarea,
  .applyForm select {
    padding: 14px 14px;
    border-radius: 12px;
    font-size: 14px;
  }

  .applyForm textarea {
    min-height: 150px;
  }

  .applyForm input[type="submit"],
  .applyForm button[type="submit"] {
    min-height: 54px;
    font-size: 14px;
  }
}



/* =========================
   Learn Page
========================= */
.learnPage {
  position: relative;
  overflow: hidden;
  color: #2b2b2b;
  background:
    radial-gradient(circle at 10% 10%, rgba(176, 15, 20, 0.05) 0%, rgba(176, 15, 20, 0) 30%),
    radial-gradient(circle at 90% 20%, rgba(176, 15, 20, 0.04) 0%, rgba(176, 15, 20, 0) 28%),
    linear-gradient(180deg, #ffffff 0%, #fffdfd 100%);
}

.learnPage > * {
  position: relative;
  z-index: 1;
}

.sectionSpace {
  padding: 100px 0;
}

/* =========================
   Hero
========================= */
.learnHero {
  position: relative;
  padding: 120px 0 90px;
  background:
    linear-gradient(180deg, rgba(176, 15, 20, 0.04) 0%, rgba(255, 255, 255, 0) 100%);
}

.learnHero__inner {
  max-width: 900px;
}

.learnHero__sub {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 18px;
  color: #b00f14;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.learnHero__sub::before {
  content: "";
  width: 42px;
  height: 1px;
  background: linear-gradient(90deg, rgba(176, 15, 20, 0.15) 0%, #b00f14 100%);
}

.learnHero__title {
  margin: 0;
  font-size: clamp(38px, 6vw, 68px);
  line-height: 1.12;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #181818;
}

.learnHero__lead {
  max-width: 760px;
  margin: 28px 0 0;
  font-size: 17px;
  line-height: 2;
  color: #555;
}

/* =========================
   Common
========================= */
.sectionHead {
  margin-bottom: 42px;
}

.sectionEyebrow {
  display: inline-block;
  margin: 0 0 12px;
  padding: 6px 12px;
  border: 1px solid rgba(176, 15, 20, 0.16);
  border-radius: 999px;
  background: rgba(176, 15, 20, 0.05);
  color: #b00f14;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.sectionTitle {
  position: relative;
  margin: 0 0 16px;
  padding-bottom: 16px;
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.22;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #181818;
}

.sectionTitle::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 76px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, #b00f14 0%, #d53d42 100%);
  box-shadow: 0 6px 16px rgba(176, 15, 20, 0.18);
}

.sectionLead {
  max-width: 720px;
  margin: 0;
  font-size: 15px;
  line-height: 1.9;
  color: #666;
}

.learnIntro__box,
.singleCard,
.learnBox,
.learnCard,
.learnCta__inner {
  position: relative;
  background: #ffffff;
  border: 1px solid rgba(176, 15, 20, 0.08);
  border-radius: 28px;
  box-shadow:
    0 20px 50px rgba(0, 0, 0, 0.05),
    0 4px 12px rgba(176, 15, 20, 0.04);
}

.learnIntro__box,
.singleCard,
.learnCta__inner {
  padding: 40px;
}

.learnIntro__text,
.singleCard__text,
.learnBox__text,
.learnCard__text {
  margin-top: 16px;
  font-size: 15px;
  line-height: 1.95;
  color: #555;
}

.learnPage strong,
.learnIntro__box strong {
  color: #b00f14;
  font-weight: 700;
}

/* =========================
   Lists
========================= */
.troubleList,
.recommendList,
.singleCard__list,
.learnBox__list,
.learnCard__list {
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}

.troubleList li,
.recommendList li,
.singleCard__list li,
.learnBox__list li,
.learnCard__list li {
  position: relative;
  margin: 0;
  padding: 0 0 0 26px;
  font-size: 15px;
  line-height: 1.95;
  color: #333;
}

.troubleList li + li,
.recommendList li + li,
.singleCard__list li + li,
.learnBox__list li + li,
.learnCard__list li + li {
  margin-top: 10px;
}

.troubleList li::before,
.recommendList li::before,
.singleCard__list li::before,
.learnBox__list li::before,
.learnCard__list li::before {
  content: "";
  position: absolute;
  top: 0.82em;
  left: 0;
  width: 11px;
  height: 11px;
  border-radius: 999px;
  background: linear-gradient(135deg, #b00f14 0%, #d74c52 100%);
  box-shadow: 0 4px 10px rgba(176, 15, 20, 0.18);
  transform: translateY(-50%);
}

/* =========================
   Cards
========================= */
.learnCards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}

.learnCard {
  padding: 30px 28px;
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}

.learnCard:hover {
  transform: translateY(-6px);
  border-color: rgba(176, 15, 20, 0.18);
  box-shadow:
    0 24px 50px rgba(0, 0, 0, 0.08),
    0 8px 18px rgba(176, 15, 20, 0.08);
}

.learnCard__title,
.learnBox__title {
  margin: 0;
  font-size: 24px;
  line-height: 1.35;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #181818;
}

.learnCard__title::before,
.learnBox__title::before {
  content: "";
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, #b00f14 0%, #d74c52 100%);
  box-shadow: 0 4px 12px rgba(176, 15, 20, 0.18);
  vertical-align: middle;
}

.learnSection--alt {
  background: linear-gradient(180deg, #fff8f8 0%, #ffffff 100%);
}

.learnCols {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 26px;
}

.learnBox {
  padding: 32px 30px;
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}

.learnBox:hover {
  transform: translateY(-4px);
  border-color: rgba(176, 15, 20, 0.16);
  box-shadow:
    0 20px 40px rgba(0, 0, 0, 0.06),
    0 8px 18px rgba(176, 15, 20, 0.06);
}

/* =========================
   Recommend
========================= */
.recommendList {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px 28px;
}

/* =========================
   CTA
========================= */
.learnCta {
  padding: 10px 0 110px;
}

.learnCta__inner {
  padding: 54px 40px;
  text-align: center;
  background:
    linear-gradient(135deg, rgba(176, 15, 20, 0.96) 0%, rgba(145, 10, 15, 0.96) 100%);
  border: none;
  box-shadow:
    0 28px 60px rgba(176, 15, 20, 0.18);
}

.learnCta__title {
  margin: 0;
  font-size: clamp(30px, 4vw, 42px);
  line-height: 1.25;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #ffffff;
}

.learnCta__text {
  max-width: 760px;
  margin: 18px auto 0;
  font-size: 15px;
  line-height: 1.95;
  color: rgba(255, 255, 255, 0.88);
}

.learnCta__buttons {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 30px;
  flex-wrap: wrap;
}

/* =========================
   Buttons
========================= */
.learnPage .btn {
  min-width: 220px;
  padding: 16px 26px;
  border-radius: 999px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: transform 0.3s ease, box-shadow 0.3s ease, opacity 0.3s ease;
}

.learnPage .btn:hover {
  transform: translateY(-2px);
}

.learnPage .btn--primary {
  background: #ffffff;
  color: #b00f14;
  border: 1px solid #ffffff;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
}

.learnPage .btn--primary:hover {
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.12);
}

.learnPage .btn--ghost {
  background: transparent;
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.45);
}

.learnPage .btn--ghost:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.7);
}

/* 通常セクション内にghostボタンを使う場合 */
.learnPage .singleCard .btn--ghost,
.learnPage .learnBox .btn--ghost,
.learnPage .learnCard .btn--ghost {
  color: #b00f14;
  border-color: rgba(176, 15, 20, 0.25);
  background: #fff;
}

.learnPage .singleCard .btn--ghost:hover,
.learnPage .learnBox .btn--ghost:hover,
.learnPage .learnCard .btn--ghost:hover {
  background: #fff7f7;
}

/* =========================
   Micro polish
========================= */
.learnPage a {
  text-underline-offset: 0.18em;
}

.learnPage .container {
  position: relative;
  z-index: 1;
}

/* =========================
   Responsive
========================= */
@media (max-width: 991px) {
  .sectionSpace {
    padding: 78px 0;
  }

  .learnCards,
  .learnCols,
  .recommendList {
    grid-template-columns: 1fr;
  }

  .learnHero {
    padding: 108px 0 70px;
  }

  .learnHero__lead,
  .sectionLead {
    max-width: none;
  }
}

@media (max-width: 767px) {
  .sectionSpace {
    padding: 56px 0;
  }

  .learnHero {
    padding: 88px 0 54px;
  }

  .learnHero__sub {
    font-size: 12px;
    letter-spacing: 0.12em;
  }

  .learnHero__lead {
    margin-top: 20px;
    font-size: 14px;
    line-height: 1.9;
  }

  .sectionHead {
    margin-bottom: 28px;
  }

  .sectionTitle {
    padding-bottom: 12px;
  }

  .learnIntro__box,
  .singleCard,
  .learnBox,
  .learnCard,
  .learnCta__inner {
    padding: 24px 18px;
    border-radius: 22px;
  }

  .learnCard__title,
  .learnBox__title {
    font-size: 20px;
  }

  .learnIntro__text,
  .singleCard__text,
  .learnBox__text,
  .learnCard__text,
  .sectionLead,
  .troubleList li,
  .recommendList li,
  .singleCard__list li,
  .learnBox__list li,
  .learnCard__list li,
  .learnCta__text {
    font-size: 14px;
    line-height: 1.85;
  }

  .learnCta {
    padding-bottom: 72px;
  }

  .learnCta__buttons {
    gap: 12px;
  }

  .learnPage .btn {
    width: 100%;
    min-width: 0;
  }
}
.sectionEyebrow--white {
  border-color: rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
}

/* =========================
特定商取引法
========================= */

.legalPage{
  padding:120px 0;
  background:#fff;
  }
  
  .legalTitle{
  font-size:36px;
  font-weight:700;
  margin-bottom:10px;
  }
  
  .legalLead{
  color:#666;
  margin-bottom:40px;
  }
  
  .lawTable{
  width:100%;
  border-collapse:collapse;
  }
  
  .lawTable th{
  width:260px;
  padding:18px;
  text-align:left;
  background:#fafafa;
  border-bottom:1px solid #eee;
  font-weight:600;
  }
  
  .lawTable td{
  padding:18px;
  border-bottom:1px solid #eee;
  line-height:1.8;
  }
  
  .lawTable a{
  color:#b00f14;
  }
  
  @media(max-width:768px){
  
  .lawTable th,
  .lawTable td{
  display:block;
  width:100%;
  }
  
  .lawTable th{
  border-bottom:none;
  }
  
  }


  /* =========================
   Legal Common
========================= */
.legalPage {
  padding: 120px 0;
  background: #fff;
  color: #222;
}

.legalHero {
  padding-bottom: 30px;
}

.legalTitle {
  margin: 0 0 12px;
  font-size: clamp(30px, 4vw, 42px);
  line-height: 1.3;
  font-weight: 700;
  color: #181818;
}

.legalLead {
  margin: 0;
  max-width: 820px;
  line-height: 1.9;
  color: #666;
}

.legalBox {
  margin-top: 24px;
  padding: 40px;
  border: 1px solid rgba(176, 15, 20, 0.08);
  border-radius: 24px;
  background: #fff;
  box-shadow:
    0 20px 50px rgba(0, 0, 0, 0.05),
    0 4px 12px rgba(176, 15, 20, 0.04);
}

.legalSection + .legalSection {
  margin-top: 34px;
  padding-top: 34px;
  border-top: 1px solid #eee;
}

.legalSection h2 {
  margin: 0 0 14px;
  font-size: 22px;
  line-height: 1.5;
  font-weight: 700;
  color: #181818;
}

.legalSection p {
  margin: 0;
  line-height: 1.95;
  color: #444;
}

.legalSection p + p {
  margin-top: 14px;
}

.legalSection ul {
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

.legalSection li {
  position: relative;
  padding-left: 24px;
  line-height: 1.95;
  color: #333;
}

.legalSection li + li {
  margin-top: 8px;
}

.legalSection li::before {
  content: "";
  position: absolute;
  top: 0.85em;
  left: 0;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, #b00f14 0%, #d74c52 100%);
  transform: translateY(-50%);
}

.legalSection a {
  color: #b00f14;
  text-decoration: none;
}

.legalSection a:hover {
  text-decoration: underline;
}

.legalDate {
  font-size: 14px;
  color: #777;
}

@media (max-width: 767px) {
  .legalPage {
    padding: 88px 0 60px;
  }

  .legalBox {
    padding: 24px 18px;
    border-radius: 18px;
  }

  .legalSection + .legalSection {
    margin-top: 26px;
    padding-top: 26px;
  }

  .legalSection h2 {
    font-size: 19px;
  }

  .legalLead,
  .legalSection p,
  .legalSection li {
    font-size: 14px;
    line-height: 1.85;
  }
}


/* =========================
   About Page
========================= */
.aboutPage {
  color: #2b2b2b;
  background:
    radial-gradient(circle at 10% 10%, rgba(176, 15, 20, 0.05) 0%, rgba(176, 15, 20, 0) 30%),
    radial-gradient(circle at 90% 20%, rgba(176, 15, 20, 0.04) 0%, rgba(176, 15, 20, 0) 28%),
    linear-gradient(180deg, #ffffff 0%, #fffdfd 100%);
}

.sectionSpace {
  padding: 100px 0;
}

.sectionAlt {
  background: linear-gradient(180deg, #fff8f8 0%, #ffffff 100%);
}

.aboutHero {
  padding: 120px 0 90px;
  background: linear-gradient(180deg, rgba(176, 15, 20, 0.04) 0%, rgba(255, 255, 255, 0) 100%);
}

.aboutHero__inner {
  max-width: 860px;
}

.aboutHero__sub {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 18px;
  color: #b00f14;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.aboutHero__sub::before {
  content: "";
  width: 42px;
  height: 1px;
  background: linear-gradient(90deg, rgba(176, 15, 20, 0.15) 0%, #b00f14 100%);
}

.aboutHero__title {
  margin: 0;
  font-size: clamp(38px, 6vw, 64px);
  line-height: 1.12;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #181818;
}

.aboutHero__lead {
  max-width: 760px;
  margin: 28px 0 0;
  font-size: 17px;
  line-height: 2;
  color: #555;
}

.sectionHead {
  margin-bottom: 42px;
}

.sectionEyebrow {
  display: inline-block;
  margin: 0 0 12px;
  padding: 6px 12px;
  border: 1px solid rgba(176, 15, 20, 0.16);
  border-radius: 999px;
  background: rgba(176, 15, 20, 0.05);
  color: #b00f14;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.sectionEyebrow--white {
  border-color: rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
}

.sectionTitle {
  position: relative;
  margin: 0 0 16px;
  padding-bottom: 16px;
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.22;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #181818;
}

.sectionTitle::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 76px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, #b00f14 0%, #d53d42 100%);
  box-shadow: 0 6px 16px rgba(176, 15, 20, 0.18);
}

.sectionLead {
  max-width: 720px;
  margin: 0;
  font-size: 15px;
  line-height: 1.9;
  color: #666;
}

.aboutIntro__grid {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 28px;
  align-items: start;
}

.aboutProfileCard,
.aboutMessageCard,
.aboutPolicy__box,
.aboutCard,
.aboutTimeline__item,
.aboutCta__inner {
  background: #ffffff;
  border: 1px solid rgba(176, 15, 20, 0.08);
  border-radius: 28px;
  box-shadow:
    0 20px 50px rgba(0, 0, 0, 0.05),
    0 4px 12px rgba(176, 15, 20, 0.04);
}

.aboutProfileCard,
.aboutMessageCard,
.aboutPolicy__box,
.aboutCta__inner {
  padding: 40px;
}

.aboutProfileCard {
  text-align: center;
}

.aboutProfileCard__icon {
  display: grid;
  place-items: center;
  width: 88px;
  height: 88px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: linear-gradient(135deg, #b00f14 0%, #d74c52 100%);
  color: #fff;
  font-size: 34px;
  font-weight: 800;
  box-shadow: 0 14px 30px rgba(176, 15, 20, 0.18);
}

.aboutProfileCard__name {
  margin: 0 0 8px;
  font-size: 28px;
  line-height: 1.4;
  color: #181818;
}

.aboutProfileCard__role {
  margin: 0 0 16px;
  color: #b00f14;
  font-weight: 700;
}

.aboutProfileCard__text,
.aboutMessageCard p,
.aboutTimeline__body p,
.aboutPolicy__item p,
.aboutCta__text {
  line-height: 1.95;
  color: #555;
}

.aboutMessageCard p + p {
  margin-top: 14px;
}

.aboutTimeline {
  display: grid;
  gap: 20px;
}

.aboutTimeline__item {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 22px;
  padding: 28px;
}

.aboutTimeline__year {
  display: grid;
  place-items: center;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: #fff7f7;
  border: 1px solid rgba(176, 15, 20, 0.12);
  color: #b00f14;
  font-size: 24px;
  font-weight: 800;
}

.aboutTimeline__body h3,
.aboutCard h3,
.aboutPolicy__item h3 {
  margin: 0 0 12px;
  font-size: 24px;
  line-height: 1.45;
  color: #181818;
}

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

.aboutCard {
  padding: 30px 28px;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}

.aboutCard:hover {
  transform: translateY(-6px);
  border-color: rgba(176, 15, 20, 0.18);
  box-shadow:
    0 24px 50px rgba(0, 0, 0, 0.08),
    0 8px 18px rgba(176, 15, 20, 0.08);
}

.aboutCard ul,
.aboutRecommend__list {
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.aboutCard li,
.aboutRecommend__list li {
  position: relative;
  padding-left: 26px;
  line-height: 1.95;
  color: #333;
}

.aboutCard li + li,
.aboutRecommend__list li + li {
  margin-top: 8px;
}

.aboutCard li::before,
.aboutRecommend__list li::before {
  content: "";
  position: absolute;
  top: 0.82em;
  left: 0;
  width: 11px;
  height: 11px;
  border-radius: 999px;
  background: linear-gradient(135deg, #b00f14 0%, #d74c52 100%);
  box-shadow: 0 4px 10px rgba(176, 15, 20, 0.18);
  transform: translateY(-50%);
}

.aboutPolicy__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 30px;
}

.aboutPolicy__item {
  padding: 26px 24px;
  border: 1px solid rgba(176, 15, 20, 0.08);
  border-radius: 22px;
  background: #fffdfd;
}

.aboutRecommend__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px 28px;
}

.aboutCta {
  padding: 10px 0 110px;
}

.aboutCta__inner {
  padding: 54px 40px;
  text-align: center;
  background: linear-gradient(135deg, rgba(176, 15, 20, 0.96) 0%, rgba(145, 10, 15, 0.96) 100%);
  border: none;
  box-shadow: 0 28px 60px rgba(176, 15, 20, 0.18);
}

.aboutCta__title {
  margin: 0;
  font-size: clamp(30px, 4vw, 42px);
  line-height: 1.25;
  font-weight: 800;
  color: #fff;
}

.aboutCta__text {
  max-width: 760px;
  margin: 18px auto 0;
  color: rgba(255,255,255,0.88);
}

.aboutCta__buttons {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 30px;
  flex-wrap: wrap;
}

.aboutPage .btn {
  min-width: 220px;
  padding: 16px 26px;
  border-radius: 999px;
  font-weight: 700;
  text-decoration: none;
  transition: transform .3s ease, box-shadow .3s ease, opacity .3s ease;
}

.aboutPage .btn:hover {
  transform: translateY(-2px);
}

.aboutPage .btn--primary {
  background: #ffffff;
  color: #b00f14;
  border: 1px solid #ffffff;
  box-shadow: 0 10px 24px rgba(0,0,0,0.08);
}

.aboutPage .btn--ghost {
  background: transparent;
  color: #ffffff;
  border: 1px solid rgba(255,255,255,0.45);
}

.aboutPage .btn--ghost:hover {
  background: rgba(255,255,255,0.08);
}

@media (max-width: 991px) {
  .sectionSpace {
    padding: 78px 0;
  }

  .aboutIntro__grid,
  .aboutCards,
  .aboutPolicy__grid,
  .aboutRecommend__list {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767px) {
  .sectionSpace {
    padding: 56px 0;
  }

  .aboutHero {
    padding: 88px 0 54px;
  }

  .aboutHero__lead,
  .sectionLead,
  .aboutProfileCard__text,
  .aboutMessageCard p,
  .aboutTimeline__body p,
  .aboutPolicy__item p,
  .aboutCard li,
  .aboutRecommend__list li,
  .aboutCta__text {
    font-size: 14px;
    line-height: 1.85;
  }

  .aboutProfileCard,
  .aboutMessageCard,
  .aboutPolicy__box,
  .aboutCta__inner {
    padding: 24px 18px;
    border-radius: 22px;
  }

  .aboutTimeline__item {
    grid-template-columns: 1fr;
    padding: 22px 18px;
  }

  .aboutTimeline__year {
    width: 70px;
    height: 70px;
    font-size: 20px;
  }

  .aboutTimeline__body h3,
  .aboutCard h3,
  .aboutPolicy__item h3 {
    font-size: 20px;
  }

  .aboutPage .btn {
    width: 100%;
    min-width: 0;
  }
}

.aboutMiniList {
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
  text-align: left;
}

.aboutMiniList li {
  position: relative;
  padding-left: 22px;
  line-height: 1.9;
  color: #444;
}

.aboutMiniList li + li {
  margin-top: 8px;
}

.aboutMiniList li::before {
  content: "";
  position: absolute;
  top: 0.82em;
  left: 0;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, #b00f14 0%, #d74c52 100%);
  transform: translateY(-50%);
}

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

.aboutWorks__item {
  padding: 28px 26px;
  background: #ffffff;
  border: 1px solid rgba(176, 15, 20, 0.08);
  border-radius: 24px;
  box-shadow:
    0 20px 50px rgba(0, 0, 0, 0.05),
    0 4px 12px rgba(176, 15, 20, 0.04);
}

.aboutWorks__item h3 {
  margin: 0 0 12px;
  font-size: 22px;
  line-height: 1.45;
  color: #181818;
}

.aboutWorks__item p {
  margin: 0;
  line-height: 1.9;
  color: #555;
}

@media (max-width: 991px) {
  .aboutWorks__grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767px) {
  .aboutWorks__item {
    padding: 22px 18px;
    border-radius: 20px;
  }

  .aboutWorks__item h3 {
    font-size: 20px;
  }

  .aboutWorks__item p,
  .aboutMiniList li {
    font-size: 14px;
    line-height: 1.85;
  }
}


/* =========================
   記事全体
========================= */
.articleWrap {
  max-width: 860px;
  margin: 0 auto;
  padding: 140px 20px 80px;
}

.articleWrap header {
  margin-bottom: 32px;
}

.articleTitle {
  margin: 0 0 16px;
  font-size: clamp(2rem, 4vw, 2.6rem);
  line-height: 1.35;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #111;
}

.articleMeta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  align-items: center;
  font-size: 14px;
  line-height: 1.7;
  color: #666;
  padding-bottom: 18px;
  border-bottom: 1px solid #e5e7eb;
}

.articleMeta a {
  color: #2b6cb0;
  text-decoration: none;
}

.articleMeta a:hover {
  text-decoration: underline;
}

/* =========================
   本文
========================= */
.entryContent {
  color: #222;
  font-size: 16px;
  line-height: 1.95;
  letter-spacing: 0.02em;
  word-break: break-word;
}

.entryContent > *:first-child {
  margin-top: 0;
}

.entryContent > *:last-child {
  margin-bottom: 0;
}

.entryContent p {
  margin: 0 0 1.45em;
}

.entryContent a {
  color: #2b6cb0;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: opacity 0.25s ease;
}

.entryContent a:hover {
  opacity: 0.75;
}

/* =========================
   見出し
========================= */
.entryContent h2 {
  margin: 3em 0 1em;
  padding: 0.95em 1.1em;
  font-size: 1.55rem;
  line-height: 1.5;
  font-weight: 700;
  color: #111;
  background: #f7f9fc;
  border-left: 6px solid #2b6cb0;
  border-radius: 10px;
}

.entryContent h3 {
  margin: 2.2em 0 0.9em;
  padding-bottom: 0.45em;
  font-size: 1.18rem;
  line-height: 1.6;
  font-weight: 700;
  color: #111;
  border-bottom: 2px solid #d9e2f1;
}

/* Easy TOC が入っても見出し内の余計なspanを崩さない */
.entryContent h2 .ez-toc-section,
.entryContent h3 .ez-toc-section {
  display: inline;
}

/* =========================
   リスト
========================= */
.entryContent ul,
.entryContent ol {
  margin: 0 0 1.6em;
  padding-left: 1.45em;
}

.entryContent ul li,
.entryContent ol li {
  margin-bottom: 0.7em;
  line-height: 1.9;
}

.entryContent ul li::marker,
.entryContent ol li::marker {
  color: #2b6cb0;
  font-weight: 700;
}

/* =========================
   強調・コード・引用
========================= */
.entryContent strong {
  font-weight: 700;
  background: linear-gradient(transparent 60%, #fff1a8 60%);
}

.entryContent blockquote {
  margin: 2em 0;
  padding: 1.2em 1.4em;
  background: #f8fafc;
  border-left: 4px solid #2b6cb0;
  border-radius: 8px;
  color: #444;
}

.entryContent code {
  padding: 0.15em 0.4em;
  background: #f1f5f9;
  border-radius: 4px;
  font-size: 0.95em;
}

.entryContent pre {
  overflow-x: auto;
  margin: 1.8em 0;
  padding: 1.2em;
  background: #1f2937;
  color: #fff;
  border-radius: 8px;
}

.entryContent pre code {
  padding: 0;
  background: transparent;
  color: inherit;
}

/* =========================
   あわせて読みたい
========================= */
.entryContent h2 + p + ul {
  margin-top: 1em;
}

.entryContent h2 + p + ul li a {
  display: inline-block;
  font-weight: 700;
  text-decoration: none;
  color: #1d4f91;
  padding: 0.2em 0;
}

.entryContent h2 + p + ul li a:hover {
  text-decoration: underline;
}

/* =========================
   CTA（LINEリンク）
========================= */
.entryContent a[href*="line.me"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 0.6em;
  padding: 14px 24px;
  min-width: 280px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  color: #fff;
  text-decoration: none;
  background: #06c755;
  border-radius: 999px;
  box-shadow: 0 10px 24px rgba(6, 199, 85, 0.2);
  transition: transform 0.25s ease, box-shadow 0.25s ease, opacity 0.25s ease;
}

.entryContent a[href*="line.me"]:hover {
  opacity: 1;
  transform: translateY(-2px);
  box-shadow: 0 14px 28px rgba(6, 199, 85, 0.24);
}

/* =========================
   目次（Easy Table of Contents）
========================= */
.entryContent #ez-toc-container {
  margin: 0 0 32px;
  padding: 20px 22px;
  background: #f8fbff;
  border: 1px solid #d9e7f7;
  border-radius: 12px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);
}

.entryContent .ez-toc-title-container {
  margin-bottom: 12px;
}

.entryContent .ez-toc-title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: #111;
}

.entryContent .ez-toc-list {
  margin: 0;
  padding-left: 1.2em;
}

.entryContent .ez-toc-list li {
  margin-bottom: 0.45em;
  line-height: 1.8;
}

.entryContent .ez-toc-list a {
  color: #2b6cb0;
  text-decoration: none;
}

.entryContent .ez-toc-list a:hover {
  text-decoration: underline;
}

/* =========================
   テーブル
========================= */
.entryContent table {
  width: 100%;
  margin: 2em 0;
  border-collapse: collapse;
  font-size: 0.95rem;
}

.entryContent th,
.entryContent td {
  padding: 0.9em 1em;
  border: 1px solid #e2e8f0;
}

.entryContent th {
  background: #f7f9fc;
  font-weight: 700;
}

/* =========================
   画像
========================= */
.entryContent img {
  max-width: 100%;
  height: auto;
  border-radius: 10px;
}

/* =========================
   スマホ
========================= */
@media (max-width: 767px) {
  .articleWrap {
    padding: 100px 16px 56px;
  }

  .articleTitle {
    font-size: 1.75rem;
    line-height: 1.45;
  }

  .articleMeta {
    font-size: 13px;
    gap: 6px 10px;
  }

  .entryContent {
    font-size: 15px;
    line-height: 1.9;
  }

  .entryContent h2 {
    margin: 2.3em 0 0.9em;
    padding: 0.8em 0.9em;
    font-size: 1.25rem;
  }

  .entryContent h3 {
    font-size: 1.08rem;
  }

  .entryContent #ez-toc-container {
    padding: 16px;
  }

  .entryContent a[href*="line.me"] {
    display: flex;
    width: 100%;
    min-width: 0;
  }
}

.line-lp {
  color: #222;
  background: #fff;
  line-height: 1.8;
  font-size: 16px;
}

.line-lp * {
  box-sizing: border-box;
}

.line-lp__inner {
  width: min(100% - 32px, 1100px);
  margin: 0 auto;
}

.line-lp__fv {
  padding: 80px 0 70px;
  background: linear-gradient(180deg, #f7fbff 0%, #ffffff 100%);
}

.line-lp__label {
  display: inline-block;
  margin: 0 0 18px;
  padding: 8px 14px;
  border-radius: 999px;
  background: #eaf4ff;
  color: #1d4f91;
  font-size: 14px;
  font-weight: 700;
}

.line-lp__title {
  margin: 0 0 20px;
  font-size: clamp(2rem, 5vw, 3.3rem);
  line-height: 1.3;
  color: #111;
}

.line-lp__lead {
  max-width: 760px;
  margin: 0 auto 30px 0;
  font-size: 1.06rem;
  color: #444;
}

.line-lp__ctaWrap {
  margin-top: 28px;
}

.line-lp__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 320px;
  padding: 18px 28px;
  border-radius: 999px;
  background: #06c755;
  color: #fff;
  font-size: 17px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 14px 30px rgba(6, 199, 85, 0.22);
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.line-lp__cta:hover {
  opacity: 1;
  transform: translateY(-2px);
}

.line-lp__note {
  margin-top: 12px;
  font-size: 14px;
  color: #666;
}

.line-lp__problems,
.line-lp__benefit,
.line-lp__present,
.line-lp__reason,
.line-lp__faq,
.line-lp__ctaBottom {
  padding: 72px 0;
}

.line-lp__problems,
.line-lp__present,
.line-lp__faq {
  background: #f9fbfd;
}

.line-lp__sectionTitle {
  margin: 0 0 28px;
  font-size: clamp(1.6rem, 3vw, 2.3rem);
  line-height: 1.4;
  color: #111;
  text-align: center;
}

.line-lp__centerText {
  text-align: center;
  color: #444;
}

.line-lp__cardGrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 30px;
}

.line-lp__card {
  padding: 22px 18px;
  background: #fff;
  border: 1px solid #e4edf5;
  border-radius: 14px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.04);
  font-weight: 700;
  text-align: center;
}

.line-lp__benefitList {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.line-lp__benefitItem,
.line-lp__reasonItem,
.line-lp__faqItem {
  padding: 28px 24px;
  background: #fff;
  border: 1px solid #e4edf5;
  border-radius: 16px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.04);
}

.line-lp__benefitItem h3,
.line-lp__reasonItem h3,
.line-lp__faqItem h3 {
  margin: 0 0 12px;
  font-size: 1.15rem;
  color: #111;
}

.line-lp__benefitItem p,
.line-lp__reasonItem p,
.line-lp__faqItem p {
  margin: 0;
  color: #444;
}

.line-lp__presentBox {
  max-width: 760px;
  margin: 0 auto;
  padding: 34px 32px;
  background: #fff;
  border: 1px solid #dfeaf4;
  border-radius: 18px;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.04);
}

.line-lp__presentBox ul {
  margin: 0;
  padding-left: 1.4em;
}

.line-lp__presentBox li {
  margin-bottom: 10px;
  font-weight: 700;
}

.line-lp__subText {
  margin-top: 18px;
  text-align: center;
  color: #555;
}

.line-lp__reasonGrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.line-lp__faq .line-lp__inner {
  max-width: 900px;
}

.line-lp__faqItem + .line-lp__faqItem {
  margin-top: 18px;
}

.line-lp__ctaBottom {
  text-align: center;
  background: linear-gradient(180deg, #ffffff 0%, #f2fbf5 100%);
}

.sp_only {
  display: none;
}

@media (max-width: 900px) {
  .line-lp__cardGrid,
  .line-lp__benefitList,
  .line-lp__reasonGrid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767px) {
  .line-lp {
    font-size: 15px;
  }

  .line-lp__fv,
  .line-lp__problems,
  .line-lp__benefit,
  .line-lp__present,
  .line-lp__reason,
  .line-lp__faq,
  .line-lp__ctaBottom {
    padding: 56px 0;
  }

  .line-lp__title {
    font-size: 2rem;
  }

  .line-lp__lead {
    font-size: 1rem;
  }

  .line-lp__cta {
    display: flex;
    width: 100%;
    min-width: 0;
    padding: 16px 20px;
    font-size: 16px;
  }

  .line-lp__presentBox {
    padding: 24px 20px;
  }

  .sp_only {
    display: block;
  }
}

.lineLpPage{
  color:#222;
  background:#fff;
  font-size:16px;
  line-height:1.8;
}
.lineLpPage *{
  box-sizing:border-box;
}
.lineLpInner{
  width:min(100% - 32px, 1100px);
  margin:0 auto;
}
.lineLpHero{
  padding:88px 0 72px;
  background:linear-gradient(180deg,#f7fbff 0%,#ffffff 100%);
}
.lineLpHero__wrap{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:40px;
  align-items:center;
}
.lineLpLabel{
  display:inline-block;
  margin:0 0 18px;
  padding:8px 14px;
  border-radius:999px;
  background:#eaf4ff;
  color:#1d4f91;
  font-size:14px;
  font-weight:700;
}
.lineLpTitle{
  margin:0 0 20px;
  font-size:clamp(2rem,4.8vw,3.4rem);
  line-height:1.3;
  color:#111;
}
.lineLpLead{
  margin:0 0 24px;
  font-size:1.05rem;
  color:#444;
}
.lineLpHero__points{
  display:flex;
  flex-wrap:wrap;
  gap:10px 12px;
  margin:0;
  padding:0;
  list-style:none;
}
.lineLpHero__points li{
  padding:8px 14px;
  background:#fff;
  border:1px solid #dce8f4;
  border-radius:999px;
  font-size:14px;
  font-weight:700;
  color:#244e7d;
}
.lineLpCtaWrap{
  margin-top:28px;
}
.lineLpCtaWrap--center{
  text-align:center;
}
.lineLpCtaBtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:320px;
  padding:18px 28px;
  border-radius:999px;
  background:#06c755;
  color:#fff;
  font-size:17px;
  font-weight:700;
  text-decoration:none;
  box-shadow:0 14px 30px rgba(6,199,85,.22);
  transition:transform .25s ease,opacity .25s ease,box-shadow .25s ease;
}
.lineLpCtaBtn:hover{
  color:#fff;
  opacity:1;
  transform:translateY(-2px);
  box-shadow:0 18px 34px rgba(6,199,85,.26);
}
.lineLpCtaNote{
  margin-top:12px;
  font-size:14px;
  color:#666;
}
.lineLpHero__visual{
  display:flex;
  justify-content:center;
}
.lineLpMock{
  width:min(100%, 420px);
  padding:24px;
  background:#fff;
  border:1px solid #dfeaf4;
  border-radius:24px;
  box-shadow:0 18px 40px rgba(0,0,0,.08);
}
.lineLpMock__head{
  margin-bottom:18px;
  font-size:1.1rem;
  font-weight:700;
  color:#111;
  text-align:center;
}
.lineLpMock__body{
  display:grid;
  gap:12px;
}
.lineLpMock__item{
  padding:14px 16px;
  background:#f7fbff;
  border:1px solid #ddeaf7;
  border-radius:14px;
  font-weight:700;
  color:#1e4c86;
}

.lineLpProblem,
.lineLpBenefit,
.lineLpPresent,
.lineLpTarget,
.lineLpTrust,
.lineLpProfile,
.lineLpFaq,
.lineLpFinal{
  padding:76px 0;
}
.lineLpProblem,
.lineLpPresent,
.lineLpTrust,
.lineLpFaq{
  background:#f9fbfd;
}
.lineLpSecTitle{
  margin:0 0 28px;
  font-size:clamp(1.65rem,3vw,2.35rem);
  line-height:1.4;
  text-align:center;
  color:#111;
}
.lineLpSecTitle--left{
  text-align:left;
}
.lineLpCenterText{
  text-align:center;
  color:#444;
}
.lineLpGrid{
  display:grid;
  gap:20px;
}
.lineLpGrid--3{
  grid-template-columns:repeat(3,1fr);
}
.lineLpCard{
  padding:22px 18px;
  background:#fff;
  border:1px solid #e4edf5;
  border-radius:14px;
  box-shadow:0 6px 18px rgba(0,0,0,.04);
  font-weight:700;
  text-align:center;
}
.lineLpBox{
  padding:28px 24px;
  background:#fff;
  border:1px solid #e4edf5;
  border-radius:16px;
  box-shadow:0 6px 18px rgba(0,0,0,.04);
}
.lineLpBox h3{
  margin:0 0 12px;
  font-size:1.12rem;
  line-height:1.5;
  color:#111;
}
.lineLpBox p{
  margin:0;
  color:#444;
}
.lineLpPresent__wrap{
  display:grid;
  grid-template-columns:1fr .9fr;
  gap:24px;
  align-items:stretch;
}
.lineLpPresent__main,
.lineLpPresent__sub{
  padding:30px 28px;
  background:#fff;
  border:1px solid #dfeaf4;
  border-radius:18px;
  box-shadow:0 8px 22px rgba(0,0,0,.04);
}
.lineLpCheckList{
  margin:0;
  padding:0;
  list-style:none;
}
.lineLpCheckList li{
  position:relative;
  padding-left:28px;
  margin-bottom:14px;
  font-weight:700;
}
.lineLpCheckList li:last-child{
  margin-bottom:0;
}
.lineLpCheckList li::before{
  content:"✔";
  position:absolute;
  left:0;
  top:0;
  color:#06c755;
  font-weight:700;
}
.lineLpMiniTitle{
  margin:0 0 12px;
  font-size:1rem;
  font-weight:700;
  color:#111;
}
.lineLpMiniLabel{
  display:inline-block;
  margin:0 0 12px;
  padding:7px 12px;
  border-radius:999px;
  background:#eef6ff;
  color:#1e4c86;
  font-size:13px;
  font-weight:700;
}
.lineLpProfile__box{
  max-width:860px;
  margin:0 auto;
  padding:34px 30px;
  background:#fff;
  border:1px solid #dfeaf4;
  border-radius:20px;
  box-shadow:0 8px 22px rgba(0,0,0,.04);
}
.lineLpProfile__box p:last-child{
  margin-bottom:0;
}
.lineLpFaq .lineLpInner{
  max-width:900px;
}
.lineLpFaqItem{
  padding:24px 24px;
  background:#fff;
  border:1px solid #e4edf5;
  border-radius:16px;
  box-shadow:0 6px 18px rgba(0,0,0,.04);
}
.lineLpFaqItem + .lineLpFaqItem{
  margin-top:18px;
}
.lineLpFaqItem h3{
  margin:0 0 10px;
  font-size:1.08rem;
  color:#111;
}
.lineLpFaqItem p{
  margin:0;
  color:#444;
}
.lineLpFinal{
  text-align:center;
  background:linear-gradient(180deg,#ffffff 0%,#f2fbf5 100%);
}

@media (max-width: 900px){
  .lineLpHero__wrap,
  .lineLpPresent__wrap,
  .lineLpGrid--3{
    grid-template-columns:1fr;
  }
}

@media (max-width: 767px){
  .lineLpPage{
    font-size:15px;
  }
  .lineLpHero,
  .lineLpProblem,
  .lineLpBenefit,
  .lineLpPresent,
  .lineLpTarget,
  .lineLpTrust,
  .lineLpProfile,
  .lineLpFaq,
  .lineLpFinal{
    padding:56px 0;
  }
  .lineLpTitle{
    font-size:2rem;
  }
  .lineLpLead{
    font-size:1rem;
  }
  .lineLpCtaBtn{
    display:flex;
    width:100%;
    min-width:0;
    padding:16px 20px;
    font-size:16px;
  }
  .lineLpMock,
  .lineLpPresent__main,
  .lineLpPresent__sub,
  .lineLpProfile__box,
  .lineLpFaqItem,
  .lineLpBox,
  .lineLpCard{
    padding:22px 18px;
  }
}