/* =========================================================
   style.css
   ---------------------------------------------------------
   今回の「起業相談無料相談LP」専用デザインです。
   前向きさ・相談しやすさ・整理感を両立させます。

   レスポンシブ用のファイルです。
========================================================= */

/* ---------------------------------------------------------
   タブレット調整
--------------------------------------------------------- */
@media (max-width: 960px) {
  .fv__topic-grid,
  .problem__list,
  .consultation__grid,
  .target__list,
  .reason__grid,
  .support__grid,
  .voice__grid,
  .access__layout {
    grid-template-columns: 1fr;
  }
}




/* ---------------------------------------------------------
   スマホ調整
--------------------------------------------------------- */
@media (max-width: 768px) {

.header__inner {
    min-height: 64px;
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
  }

  .header__logo {
    min-width: 0;
  }

  .header__logo-sub {
    font-size: 0.65rem;
    letter-spacing: 0.08em;
  }

  .header__logo-main {
    font-size: 1rem;
    line-height: 1.2;
    white-space: nowrap;
  }

  /* SPでは通常ナビをドロップダウン化 */
  .header__nav {
    display: none;
    position: absolute;
    top: 64px;
    left: 0;
    width: 100%;
    padding: 18px 20px 22px;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 14px 30px rgba(9, 34, 74, 0.12);
    z-index: 99;
  }

  .header__nav.is-open {
    display: block;
  }

  .header__nav-list {
    display: grid;
    gap: 14px;
  }

  .header__nav-list a {
    display: block;
    padding: 10px 0;
    color: #09224a;
    font-size: 0.95rem;
    font-weight: 700;
  }

  /* SPのCTAは小さく */
  .header__cta {
    width: auto;
    min-width: auto;
    min-height: 38px;
    padding: 8px 12px;
    border-radius: 999px;
    font-size: 0.78rem;
    white-space: nowrap;
  }

  /* ハンバーガーボタン */
  .header__hamburger {
    display: flex;
    width: 42px;
    height: 42px;
    border: none;
    background: transparent;
    padding: 8px;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    cursor: pointer;
  }

  .header__hamburger span {
    display: block;
    width: 26px;
    height: 3px;
    border-radius: 999px;
    background: #1f6edb;
    transition: 0.3s ease;
  }

  /* 開いた時に×印にする */
  .header__hamburger.is-open span:nth-child(1) {
    transform: translateY(9px) rotate(45deg);
  }

  .header__hamburger.is-open span:nth-child(2) {
    opacity: 0;
  }

  .header__hamburger.is-open span:nth-child(3) {
    transform: translateY(-9px) rotate(-45deg);
  }

/* =========================
   FV SP
========================= */
  .fv__inner {
    width: 100%;
  }

  .fv__main {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas:
      "copy"
      "visual"
      "icons"
      "buttons";
    gap: 22px;
    min-height: auto;
    padding: 32px 20px 28px;
  }

  .fv__copy {
    grid-area: copy;
  }

  .fv__label {
    margin-bottom: 18px;
    font-size: 0.86rem;
  }

  .fv__title {
    font-size: clamp(2.3rem, 11vw, 3.6rem);
    line-height: 1.28;
  }

  .fv__lead {
    font-size: 0.96rem;
    line-height: 2;
  }

  .fv__visual {
    grid-area: visual;
    min-height: 360px;
    margin-inline: -20px;
  }

  .fv__image {
    width: 100%;
    height: 420px;
    object-fit: cover;
    border-radius: 0;
  }

  .fv__badge {
    top: 18px;
    left: 18px;
    width: 116px;
    height: 116px;
  }

  .fv__badge strong {
    font-size: 38px;
  }

  .fv__check-card {
    left: 18px;
    bottom: 18px;
    width: 220px;
    padding: 16px;
  }

  .fv__icon-list {
    grid-area: icons;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    margin: 0;
  }

  .fv__icon {
    min-height: 96px;
    padding: 14px 8px;
  }

  .fv__icon-img {
    width: 40px;
    height: 40px;
  }

  .fv__buttons {
    grid-area: buttons;
    display: grid;
    gap: 14px;
    margin: 0;
  }

  .fv__buttons .c-btn {
    width: 100%;
  }

  .fv__bottom {
    margin: 0 14px;
    padding: 24px 14px;
    border-radius: 22px;
    transform: none;
  }

  .fv__bottom-title {
    font-size: 1.25rem;
  }

  .fv__topic-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .topic-card {
    grid-template-columns: 36px 60px 1fr;
    gap: 12px;
    padding: 16px;
  }

  .topic-card__num {
    width: 34px;
    height: 34px;
  }

  .topic-card__icon {
    width: 54px;
    height: 54px;
  }

  .topic-card__title {
    font-size: 1rem;
  }

  .topic-card__text {
    font-size: 0.85rem;
  }



  .flow__item {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .access__row {
    grid-template-columns: 1fr;
  }

  .access__row dt,
  .access__row dd {
    padding: 14px 16px;
  }

  .cta {
    padding: 72px 0;
  }

  .cta__inner {
    padding: 34px 20px;
  }

  .cta__buttons {
    flex-direction: column;
  }
    .faq__question {
    padding: 18px;
    font-size: 0.95rem;
  }

  .faq__answer p {
    padding: 0 18px 18px;
    font-size: 0.9rem;
  }
}