/*
  つなぎばとは？（/about・T-215）。お手本はサウナイキタイの /about（2026-09-30 に PC 1280px・スマホ 390px で測った）。
    PC   白い箱 1100。1段目は左右 80＋90 の内側で本文の幅 760、上 80・下 120
         ロゴ 高さ195（原本 250×195）、下 30。キャッチ 26px/46.8 太字・青・中央。見出しのかたまりの上 20・下 80
         見出し 36px/57.6 太字・青・中央、下 40
         本文 22px/44 **太字**、段落の下 40
         イラスト 幅450・上 50
         やりたいこと：上下 100・左右 80。3列（1列 300）。丸 140（#F7F7F7）に絵 90、下 20
                       題 26px/42.9 太字・下 20、説明 16px/28.8。列の下 60
         お願いの箱：幅 780・#F7F7F7・内側 50。題 26px/42.9、本文 16px/32 太字
         共有ボタン 下 40
    スマホ 内側 30（やりたいことは 40）。ロゴ 高さ109、キャッチ 18px/32.4、見出し 26px/41.6・下 20
         本文 16px/32 太字・段落の下 25。イラスト 幅250
         やりたいこと：1列、丸 140・下 10、題 18px/29.7・下 10、説明 14px/25.2、項目の下 40
         お願いの箱：内側 30、題 18px/28.8・下 20、本文 14px/28 太字
  色は原本の青 #0051E0 をつなぎばの青 #469BFF に置き換える（T-71）。
*/
.ab-wrap { max-width: 1100px; margin: 0 auto 60px; }
.ab { background: #fff; border-radius: 16px; color: #111; overflow: hidden; }
.ab-sp { display: none; }

.ab-sec { padding: 0 170px 120px; }
.ab-sec--first { padding-top: 100px; }
.ab-sec--center { padding: 100px 80px; text-align: center; }
.ab-sec--last { padding-top: 0; padding-bottom: 100px; text-align: center; }

.ab-head { margin: 0 -90px 80px; text-align: center; }   /* キャッチは本文の幅 760 より広く使う（3行目が1行に入るように） */
.ab-head__logo { margin: 0 0 30px; line-height: 0; }
.ab-head__logo img { height: 195px; width: auto; display: inline-block; }
.ab-head__copy { margin: 0; color: #469BFF; font-size: 26px; line-height: 1.8; font-weight: 700; }

.ab-h2 { margin: 0 0 40px; color: #469BFF; font-size: 36px; line-height: 1.6; font-weight: 700; text-align: center; }
.ab-h2--next { margin-top: 80px; }

.ab-body p { margin: 0 0 40px; font-size: 22px; line-height: 2; font-weight: 700; }
.ab-body p:last-child { margin-bottom: 0; }
.ab-body .ab-note { font-size: 14px; line-height: 1.8; font-weight: 400; color: #666; }
.ab-ref { font-size: .6em; vertical-align: super; line-height: 0; }
.ab-body a, .ab-item__text a { color: #469BFF; text-decoration: underline; }

.ab-illust { margin: 50px auto 0; width: 450px; max-width: 100%; }
.ab-illust img { display: block; width: 100%; height: auto; }

.ab-items { display: flex; justify-content: center; gap: 20px; margin: 0 0 60px; padding: 0; list-style: none; }
.ab-item { flex: 0 1 300px; }
.ab-item__img { display: flex; align-items: center; justify-content: center; width: 140px; height: 140px; margin: 0 auto 20px; border-radius: 50%; background: #F7F7F7; }
.ab-item__img img { height: 96px; width: auto; }
.ab-item__title { margin: 0 0 20px; font-size: 26px; line-height: 1.65; font-weight: 700; }
.ab-item__text { margin: 0; font-size: 16px; line-height: 1.8; }

.ab-ask { max-width: 780px; margin: 0 auto; padding: 50px; background: #F7F7F7; text-align: center; box-sizing: border-box; }
.ab-ask__title { margin: 0 0 20px; font-size: 26px; line-height: 1.65; font-weight: 700; }
.ab-ask__text { margin: 0; font-size: 16px; line-height: 2; font-weight: 700; text-align: left; }
.ab-ask--left { margin-top: 60px; }

.ab-promises { margin: 0; padding: 0; list-style: none; }
.ab-promises li { display: flex; gap: 20px; }
.ab-promises li + li { margin-top: 28px; }
.ab-promises__no { flex-shrink: 0; width: 1.4em; color: #469BFF; font-size: 22px; line-height: 2; font-weight: 700; }
.ab-promises__title { margin: 0; font-size: 22px; line-height: 2; font-weight: 700; }
.ab-promises__note { margin: 4px 0 0; font-size: 16px; line-height: 1.8; color: #444; }

.ab-quote { margin: 0 0 40px; padding: 4px 0 4px 24px; border-left: 3px solid #469BFF; font-size: 18px; line-height: 2; color: #333; }
.ab-quote cite { display: block; margin-top: 8px; font-size: 14px; font-style: normal; color: #666; }

.ab-share { display: flex; justify-content: center; gap: 8px; margin: 0 0 40px; }
.ab-share a { display: flex; align-items: center; justify-content: center; gap: 6px; flex: 0 1 160px; padding: 9px 0; border-radius: 4px; color: #fff; font-size: 13px; font-weight: 700; text-decoration: none; }
.ab-share svg { width: 16px; height: 16px; fill: currentColor; flex-shrink: 0; }
.ab-share__x { background: #111; }
.ab-share__fb { background: #1877F2; }
.ab-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 28px; margin: 0; padding: 0; list-style: none; font-size: 15px; }
.ab-links a { color: #469BFF; text-decoration: underline; }

.ab-crumbs { display: flex; flex-wrap: wrap; gap: 8px; margin: 40px 0 0; font-size: 12px; color: #898989; }
.ab-crumbs a { color: #222; }

@media (max-width: 1023px) {
    .ab-wrap { margin: 0 0 40px; }
    .ab { border-radius: 0; }
    .ab-sp { display: inline; }
    .ab-sec { padding: 0 30px 60px; }
    .ab-sec--first { padding-top: 50px; }
    .ab-sec--center { padding: 40px 40px 60px; }
    .ab-sec--last { padding-bottom: 50px; }
    .ab-head { margin: 0 0 60px; }
    .ab-head__logo img { height: 109px; }
    .ab-head__copy { font-size: 18px; }
    .ab-h2 { margin-bottom: 20px; font-size: 26px; }
    .ab-h2--next { margin-top: 50px; }
    .ab-body p { margin-bottom: 25px; font-size: 16px; }
    .ab-body .ab-note { font-size: 12px; }
    .ab-illust { width: 250px; margin-top: 40px; }
    .ab-items { display: block; margin-bottom: 40px; }
    .ab-item + .ab-item { margin-top: 40px; }
    .ab-item__img { margin-bottom: 10px; }
    .ab-item__title { margin-bottom: 10px; font-size: 18px; }
    .ab-item__text { font-size: 14px; line-height: 1.8; }
    .ab-ask { padding: 30px; }
    .ab-ask__title { font-size: 18px; }
    .ab-ask__text { font-size: 14px; }
    .ab-promises li { gap: 12px; }
    .ab-promises li + li { margin-top: 20px; }
    .ab-promises__no, .ab-promises__title { font-size: 16px; }
    .ab-promises__note { font-size: 13px; }
    .ab-quote { margin-bottom: 25px; padding-left: 16px; font-size: 15px; }
    .ab-quote cite { font-size: 12px; }
    .ab-links { font-size: 14px; gap: 10px 20px; }
    .ab-crumbs { padding: 0 20px; }
}

/* つなぎばでできること（T-235）。6つをカードで並べ、押すと /guide の該当の節へ。PC 3列・スマホ 1列 */
.ab-can { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: 0; padding: 0; list-style: none; }
.ab-can__item a { display: block; height: 100%; box-sizing: border-box; padding: 26px 24px; border: 1px solid #E5E5E5; border-radius: 12px; color: inherit; text-decoration: none; }
.ab-can__item a:hover { border-color: #469BFF; }
.ab-can__title { margin: 0 0 10px; color: #469BFF; font-size: 18px; line-height: 1.5; font-weight: 700; }
.ab-can__text { margin: 0; font-size: 16px; line-height: 1.8; }
.ab-can__more { margin: 40px 0 0; text-align: center; }
.ab-can__more a { display: inline-block; min-width: 280px; padding: 13px 24px; border-radius: 4px; background: #469BFF; color: #fff; font-size: 16px; font-weight: 700; text-decoration: none; }
@media (max-width: 1023px) {
    .ab-can { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    .ab-can__item a { padding: 18px 20px; }
    .ab-can__title { font-size: 16px; }
    .ab-can__text { font-size: 15px; }
    .ab-can__more a { width: 100%; min-width: 0; box-sizing: border-box; }
}