/* --------------------
  Reset & Base
-------------------- */
*,
*::before,
*::after { box-sizing:border-box; margin:0; padding:0; }

html { scroll-behavior: smooth; }

body {
  font-family: "Noto Sans JP", sans-serif;
  line-height: 1.7;
  color: #333;
  background: #fff;
}

img { display:block; max-width:100%; height:auto;width: 100%; }
a   { color: inherit; text-decoration: none; }
ul,ol { list-style: none; }

/* Utility */
.container { width: min(100% - 50px, 1000px); margin-inline:auto; }
.sp-only { display:none; }
.required { color:#e60000; margin-left:.3em; font-size:.8em; }

/* Buttons */
.btn-primary,
.btn-secondary {
  display:inline-block;
  padding: .9em 2.5em;
  font-weight: 700;
  border-radius: 100vmax;
  text-align:center;
  line-height:1;
  transition: .3s;
}
.btn-primary { background:#ffd22e;color: #000; }
.btn-primary.form__submit:hover { filter: brightness(110%); }
.btn-secondary {
  background:#fff; border:2px solid #06c755; color:#06c755;
}
.btn-secondary:hover { background:#06c755; color:#fff; }

/* --------------------
  Header
-------------------- */
.header {
  position:sticky; top:0; inset-inline:0;
  background:#fff; z-index:10; box-shadow:0 2px 4px rgba(0,0,0,.05);
}
.header__inner {
  display:flex; align-items:center; gap:24px;
  padding:10px 0;
}

@media (max-width: 1220px) {
    .header .logo img {height: 58px; margin: 8px 0px;}
    .container_hero {max-width: 820px !important}
}
@media (max-width: 1000px) {
    .header .logo img {
        height:42px; 
        margin: 8px 0px;
    }
}
}

.pc-nav__list { display:flex; gap:32px; font-weight:700; }
.hamburger {
  display:none;
  flex-direction:column; gap:4px;
  width:24px; background:none; border:none; padding:0; cursor:pointer;
}
.hamburger span { display:block; height:2px; background:#06c755; }

/* --------------------
  SP Navigation Overlay
-------------------- */
.sp-nav {
  position:fixed; inset:0; background:#fff;
  padding:80px 24px; transform:translateX(100%);
  transition:.4s; z-index:1100;
  height: max-content;
}
.sp-nav.is-open { transform:translateX(0); }
.sp-nav__close {
  position:absolute; top:10px; right:20px;
  background:none; border:none; font-size:40px; line-height:1; cursor:pointer;    color: #03c755;
}
.sp-nav__logo {
    width: 61px;
    position: absolute;
    top: 10px;
    left: 20px;
}
.sp-nav__list { display:flex; flex-direction:column; gap:14px; font-size:1.2rem; font-weight:700; }
.sp-nav__cta { display:block; margin:40px auto 0; max-width:260px; }
.sp-nav-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.4);
  opacity: 0;
  transition: opacity 0.5s ease;
  z-index: 1000;
  pointer-events: none;
}

.sp-nav-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
  display: block;
}

/* --------------------
  Hero
-------------------- */
.hero {
  background:#e9fddb;
  padding:60px 0;
}
.hero__content {
  display:grid; align-items:center; gap:40px;
}
.hero__catch { font-size:clamp(1.8rem,3vw,2.4rem); color:#06c755; }
.hero__lead  { margin:16px 0 24px; font-weight:700; }
.hero__price { font-size:2rem; color:#e60000; }
.hero__btn   { font-size:1.1rem; }
.hero__illust img { width:min(100%,360px); }

/* --------------------
  Common Sections
-------------------- */
.block { padding:80px 0; }
@media (max-width: 768px) {
    .block {         padding-top: 50px;
        padding-bottom: 75px; }
}


.block--light { background:#e6fadc; }

.block__title {
  font-size:36px;
  font-weight:700;
  margin-bottom:48px; position:relative;
  padding: 0 .5em .5em 1.5em;
  scroll-margin-top: 200px;
}

.block__title::before {
  content:url(/img/check.svg);
  width:48px; 
  height:4px;
  position:absolute;
  translate:-30% 0;
  top: .2em;
  left: .2em;
}
@media (max-width: 767px) {
    .block__title {
        font-size: 24px;
    }
    .block__title::before {
        width: 30px;
    }
}

/* How Steps  */
.steps { display:grid; gap:40px; text-align:center; }
.step h3 { margin:16px 0 8px; font-size:1.1rem; }

/* Features */
.feature-list {
  --col:repeat(auto-fit,minmax(220px,1fr));
  display:grid; grid-template-columns:var(--col); gap:40px;
  text-align:center;
}
.feature-list__item h3 { margin:16px 0 8px; font-size:1.1rem; }

/* Approaches */
.approach-list {
  margin-top: 3em;
  --col:repeat(auto-fit,minmax(200px,1fr));
  display:grid; grid-template-columns:var(--col); gap:24px;
}
.approach-list li p { margin-top:8px; font-size:1.3em; text-align:center; font-weight:bold;}

#approach{
padding-bottom:20px !important;
}

@media (max-width: 768px) {
br.approach{
    display: none;
    width: 300px;
  }
  .approach_container{
   font-size:14px !important;   
  }

  .approach-list img {
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
  }

.approach-list li {
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 40px;
  }
    .approach-list li figure {
    max-width: 300px;
    width: 100%;
  }
  .approach-list li p {
    width: 100%;
    text-align: center;
    white-space: nowrap;
    overflow-x: auto;
    font-size:1em;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    font-size: 13px;
  }
  .approach-list {
    flex-direction: column;
    align-items: center;
  }
    .approach-list li p::-webkit-scrollbar {
    display: none;
  }
}

/* Price  */
.price { padding:60px 0; text-align:center; }
.price__box {
  border:4px solid #06c755; padding:40px 24px; border-radius:16px;
  max-width:480px;
}
.price__label { font-size:1.2rem; font-weight:700; margin-bottom:24px; }
.price__cost { font-size:2.4rem; font-weight:900; color:#e60000; margin-bottom:24px; }
.price__cost small { font-size:.6em; margin-left:.3em; }

/* FAQ  */
.block--faq { background:#e6fadc; }
.faq__item { border-bottom:1px solid #fff; }
.faq {
    width: 89%;
    margin: auto;
}
@media (max-width: 768px) {
.faq {
    width: 100%;
    margin: auto;
}
.faq dt {
  font-size: 16px !important;
}
}
.faq dt {
  padding:20px 0; font-weight:700; cursor:pointer;
  position:relative; padding-right:30px;font-size: 18px;
}
.faq dt::after {
  content:"+"; position:absolute; right:0; top:50%; translate:0 -50%;
  font-size:1.5rem; transition:.3s;color:#03c755;
}
.faq .is-open dt::after { content:"−"; }

.faq .is-open dd { display:block; }
.faq dd {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.4s ease;
  padding: 0 0;
}

.faq__item.is-open dd {}

.faq-question {
  position: relative;
  display: block;
  padding-left: 35px; /* アイコンの幅(18px) + margin(17px) */
}

.faq-question::before{
  content: "";
  position: absolute;
  top: 5px;
  left: 0;
  width: 18px;
  height: 24px;
  background-image: url("img/question.svg");
  background-size: contain;
  background-repeat: no-repeat;
}
.faq dd p {
  position: relative;
  padding:0px 0px 20px 35px;
}
.faq dd p::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 18px;
  height: 24px;
  background-image: url("img/answer.svg");
  background-size: contain;
  background-repeat: no-repeat;
}



/* Company */
.company { display:grid; gap:40px; align-items:center; }
.company__img img { border-radius:8px; }
.company__content p { margin:16px 0 24px; }
.btn-secondary { max-width:220px; }

/* Form */
.entry { background:#e9fddb; }

.entry__lead { text-align:center; margin-bottom:32px; font-weight:700; }
.entry__lead span { background:#ffd22e; padding:0 4px; }
.form { --gap:24px; display:grid; gap:var(--gap); max-width:700px; margin-inline:auto; }
.form__group { display:flex; flex-direction:column; gap:8px; }
.form__group input,
.form__group select { padding:.9em; border:1px solid #ccc; border-radius:8px; font-size:1rem; }
.form__radio { border:none; padding:0; }
.form__radio legend { margin-bottom:8px; font-weight:700; }
.form__radio label { margin-right:24px; }
.form__submit { margin-top:2em; width:320px; height:70px; padding:1em; font-size:1.1rem; border: none;}

/* Footer */
.footer { background:#fff; color:#141414; }
.footer__inner {
  display:flex; flex-wrap:wrap; gap:40px;
  padding:60px 0; justify-content:space-between;
}
.footer__contact max-width:320px;
.footer__title { font-size:1.3rem; margin-bottom:16px; }
.footer__tel { font-size:1.4rem; font-weight:700; margin:8px 0; }
.footer__line { display:inline-block; margin-top:16px; }
.footer__nav ul { display:flex; flex-direction:column; gap:8px; }
.footer__copy { text-align:center; background:#fff; font-size:.8rem; }

/* --------------------
  Media Queries
-------------------- */
@media (min-width: 768px) {
  .sp-only { display:none!important; }


  .header__cta { display:inline-block; }

  /* Hero layout */
  .hero__content {
    grid-template-columns: 1fr 1fr;
  }

  /* Steps */
  .steps { grid-template-columns: repeat(3,1fr); }

  /* Company */
  .company { grid-template-columns:1fr 1fr; }

}


@media (max-width: 767.98px) {
  .feature-list,
  .approach-list { grid-template-columns:1fr; }

  .company { grid-template-columns:1fr; }
  .sp-only { display:inline; }

  /* Footer nav 横並びを解除 */
  .footer__nav ul { flex-direction:row; flex-wrap:wrap; gap:16px; }
  
  
  .approach-list>li { margin:auto; }
  .approach-list img{ width:300px; }
}