/* スマホ最適化: 1セクションをできるだけ1画面で見られるようにする（760px以下のみ）。
   縦に積んでいたカード群は横スワイプ（次のカードを少し見せる）にし、余白と固定高さを詰める。
   デスクトップ表示は変更しない。他のCSSより後に読み込むこと。 */
@media(max-width:760px){
 :root{--section-space:36px;--mf-gut:24px}

 /* 共通：セクション余白と見出しを詰める */
 .intro{padding-top:28px;padding-bottom:20px}
 .intro-copy{margin-top:14px}
 .ct-section,.cb-section{padding-block:36px}
 .ct-section .cb-heading,.ct-section .cb-centered-heading{margin-bottom:18px;gap:10px}
 .ct-section .cb-heading>p,.ct-section .cb-centered-heading>p:last-child{font-size:14px;line-height:1.8;margin-top:10px}

 /* 横スワイプの共通部品 */
 .benefits,.brand-scenes,.ct-pricing .cb-plans{
  display:grid;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:84%;gap:14px;
  overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch
 }
 .benefits::-webkit-scrollbar,.brand-scenes::-webkit-scrollbar,.ct-pricing .cb-plans::-webkit-scrollbar,.stock-grid::-webkit-scrollbar{display:none}
 .benefits>article,.brand-scenes>figure,.ct-pricing .cb-plans>article{scroll-snap-align:start;min-width:0}

 /* 3つの使い方 */
 .benefits{scroll-padding-inline:var(--mf-gut);align-items:start;padding-bottom:4px}
 .benefit-art{aspect-ratio:auto;height:200px;margin-bottom:10px}
 .benefits h3{margin-bottom:6px}
 .benefits article>p{margin-bottom:10px}

 /* 01 探す：3列×3段を横スワイプで15点 */
 .stock-library .cb-heading-aside>p:first-child{display:none}
 .stock-library .cb-heading{margin-bottom:14px}
 .stock-library-count{margin-top:8px!important}
 .stock-results-bar{margin-top:14px}
 .stock-suggestions{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:calc(var(--mf-gut) * -1);padding-inline:var(--mf-gut)}
 .stock-suggestions::-webkit-scrollbar{display:none}
 .stock-suggestions>*{flex:none}
 .stock-grid{
  grid-template-columns:none;grid-template-rows:repeat(3,auto);grid-auto-flow:column;grid-auto-columns:calc((100% - 20px) / 3);
  gap:12px 10px;overflow-x:auto;scrollbar-width:none;scroll-snap-type:x proximity;margin-inline:calc(var(--mf-gut) * -1);padding-inline:var(--mf-gut);scroll-padding-inline:var(--mf-gut)
 }
 .stock-grid>*{scroll-snap-align:start;min-width:0}
 .stock-card-title{font-size:11px;line-height:1.5}
 .stock-preview-note{margin-top:10px;font-size:11px}
 .stock-to-create{padding:18px 0 8px;gap:14px}

 /* 02 つくる */
 .ct-section .ct-stage,.ct-section .ct-result{min-height:0;padding:18px 16px;gap:12px}
 .ct-stage-intro h3{font-size:19px}
 .ct-example-trio figure>img,.ct-example-trio .ct-portrait{height:150px}
 .ct-section .ct-result{display:grid;grid-template-columns:minmax(0,1fr) 126px;align-items:center;gap:12px}
 .ct-section .ct-generated{height:160px;max-width:none;width:100%;margin:0}
 .ct-prompt-hint{display:none}
 .ct-generated .stock-custom-result,.ct-section.has-search-idea .ct-generated{min-height:0}
 .ct-result .cb-prompt>p{font-size:14px;line-height:1.7}
 .ct-prompt-meta>span:last-child{display:none}
 .ct-section .cb-demo-note{margin-top:8px!important}

 /* 03 スタイルをそろえる：3場面を横スワイプ */
 .brand-scenes{scroll-padding-inline:var(--mf-gut);margin-inline:calc(var(--mf-gut) * -1);padding-inline:var(--mf-gut)}
 .brand-scenes{grid-auto-columns:72%}
 .brand-scene .brand-art{height:auto;aspect-ratio:1}
 .brand-scene figcaption{padding-top:8px}
 .brand-demo-note,.brand-demo-status{margin-top:8px}
 .ct-use-notes{margin-top:16px;padding-top:16px;gap:14px}
 .designer-summary-description{display:none}

 /* 料金：3プランを横スワイプ */
 .ct-pricing .cb-plans{scroll-padding-inline:var(--mf-gut);margin-inline:calc(var(--mf-gut) * -1);padding-inline:var(--mf-gut);align-items:start}
 .ct-pricing .cb-plan{padding:20px}
 .ct-pricing .cb-billing-bar{margin-bottom:14px}
 .ct-pricing .cb-enterprise{margin-top:14px;padding:18px}

 /* よくある質問：まず質問の一覧だけ見える */
 .ct-faq .cb-faq-layout{gap:14px}
 .cb-faq-intro>p:not(.eyebrow){display:none}
 .cb-faq-intro>.text-link{margin-top:8px}
 .ct-faq .cb-questions summary{padding-block:14px}

 /* 最後のCTA／フッター */
 .ct-closing{padding-block:28px}
 .ct-closing-card{padding:22px 20px 16px;gap:14px}
 .ct-closing-copy>p:not(.eyebrow){margin:12px 0 16px}
 .ct-closing-visual>img{aspect-ratio:1.9}
 .ct-footer{padding-top:24px}
 .ct-footer .cb-footer-main{gap:18px 16px;padding-bottom:18px}
}
@media(max-width:390px){:root{--mf-gut:20px}}