/*
  合気道箕面：スマートフォン用 横幅活用・自然改行設定
  デスクトップ表示は維持し、スマートフォンでは余白を抑えて
  文章を画面右端近くまで使い、通常の日本語折り返しを行います。
*/

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Grid / Flex 内の要素が内容幅によって横へ押し出されることを防止 */
:where(main, section, article, aside, header, footer, nav, form, fieldset,
       .card, .pane, .panel, .box, .hero, .hero-inner, .section,
       [class*="grid"] > *, [class*="row"] > *, [class*="columns"] > *) {
  min-width: 0;
}

:where(img, picture, video, iframe, svg, canvas, table, input, select, textarea) {
  max-width: 100%;
}

@media (max-width: 760px) {
  html, body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  body {
    line-break: auto;
    word-break: normal;
    overflow-wrap: normal;
    font-kerning: normal;
  }

  /* 外側の左右余白を最小限にし、画面幅を十分に使う */
  :where(.wrap) {
    width: 100% !important;
    max-width: none !important;
    margin-inline: auto !important;
    padding-left: 6px !important;
    padding-right: 6px !important;
  }

  :where(.page, .container) {
    width: calc(100% - 8px) !important;
    max-width: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* カード内部の二重・三重の余白を抑える */
  :where(.hero, .hero-inner, .card, .section, .pane, .panel, .box,
         .callout, .page-intro, .form-hero, .details-section,
         .contact-path, .next, .content-card, .story-card) {
    padding-left: 13px !important;
    padding-right: 13px !important;
  }

  :where(.trial-form) {
    padding-left: 9px !important;
    padding-right: 9px !important;
  }

  :where(.form-block-head, .form-block-body) {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  :where(.list li, summary, .detail-content, .quick-contact) {
    padding-left: 11px !important;
    padding-right: 11px !important;
  }

  /* balance / pretty を使わず、右端まで自然に文字を流す */
  :where(h1, h2, h3, h4, h5, h6, p, li, dd, dt, figcaption,
         blockquote, summary, label, legend, strong, em,
         .sub, .lead, .copy, .description, .section-intro,
         .hero-lead, .hero-copy, .section-title, .faq-title,
         [class*="headline"], [class*="heading"], [class*="catch"],
         [class*="-copy"], [class*="-lead"], [class*="-text"],
         [class*="title"]:not(.brand-title-image)) {
    max-width: 100% !important;
    text-wrap: wrap !important;
    white-space: normal;
    word-break: normal !important;
    overflow-wrap: normal;
    line-break: auto;
  }

  /* 見出しの字間を少し詰め、1文字だけ次行へ落ちる現象を軽減 */
  :where(h1, h2, h3, h4, .section-title, .form-block-title) {
    letter-spacing: .01em !important;
  }

  /* ボタンも固定幅・一行固定を解除し、利用可能幅を使う */
  :where(a, button, .btn, .action, .navlink, .contact-path, .choice label) {
    max-width: 100%;
    text-wrap: wrap !important;
    white-space: normal !important;
    word-break: normal;
    line-break: auto;
  }

  :where(.btn, .action, .contact-path) {
    min-width: 0 !important;
  }

  /* メールアドレス・URL・電話番号などの長い連続文字だけは折り返し可能にする */
  :where(a[href^="http"], a[href^="mailto:"], code, pre, .mono, .big) {
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
  }

  /* 本当に一行で見せる必要がある短い表示のみ維持 */
  :where(.time-badge, .date-unit, .req, .opt) {
    white-space: nowrap !important;
  }

  /* ナビゲーションは横幅不足時に自然に次の行へ送る */
  :where(.nav, .nav-links, .links, .hero-cta, .actions) {
    max-width: 100%;
    flex-wrap: wrap !important;
  }

  /* スマホでカードを狭める既存指定を上書き */
  :where(.big-card, #final-cta.big-card, .materials-stack .big-card) {
    width: 100% !important;
    max-width: 100% !important;
  }
}

@media (max-width: 390px) {
  :where(.wrap) {
    padding-left: 4px !important;
    padding-right: 4px !important;
  }

  :where(.page, .container) {
    width: calc(100% - 6px) !important;
  }

  :where(.hero, .hero-inner, .card, .section, .pane, .panel, .box,
         .callout, .page-intro, .form-hero, .details-section,
         .contact-path, .next, .content-card, .story-card) {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  :where(.form-block-head, .form-block-body, .list li, summary, .detail-content) {
    padding-left: 9px !important;
    padding-right: 9px !important;
  }
}

/* 既存の高詳細度・!important 指定にも確実に優先させる */
@media (max-width: 760px) {
  .big-card,
  #final-cta.big-card,
  .materials-stack .big-card {
    width: 100% !important;
    max-width: 100% !important;
  }

  .hero h1,
  .section h2,
  .final-cta h2,
  .form-block-title {
    text-wrap: wrap !important;
    line-break: auto !important;
    word-break: normal !important;
  }
}