/*
 * Ichikawa Kaban - Responsive
 * 注意: Figma の「iPhone 13 mini」フレームは「スマホデザイン」の
 * プレースホルダーのみで実デザイン未作成のため、
 * PCデザインを基準にした汎用的なレスポンシブ対応です。
 * SPデザイン確定後に調整してください。
 */

/* タブレット */
@media (max-width: 1200px) {
  .inner { padding: 0 40px; }
  .news-grid { grid-template-columns: repeat(2, 1fr); gap: 60px 30px; }
  .top-brand__row, .top-concept__row, .concept-intro__row { flex-direction: column; }
  .top-concept__text { width: auto; }
  .top-brand__desc { width: auto; }
  .top-safety__panel { padding: 60px 40px; }
  .cta-banner__green { padding-left: 50px; font-size: 20px; }
  .item-grid { grid-template-columns: repeat(2, 1fr); gap: 60px 40px; }
  .news-layout { flex-direction: column; }
  .news-sidebar { width: 100%; }
  .kodawari-block { gap: 40px; }
  .point-item { flex: 0 0 84vw; flex-direction: column; }
  .point-item__text { width: auto; }
  .point-item__img { width: 100%; }
}

/* スマートフォン */
@media (max-width: 768px) {
  :root { --sidebar-w: 0px; }
  body { font-size: 14px; }

  /* ヘッダー：サイドバー → 開閉式ドロワー */
  .site { display: block; }
  .site-content { margin-left: 0; grid-column: auto; grid-row: auto; }
  .site-footer { grid-column: auto; grid-row: auto; }
  .site-header {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    overflow: hidden;
    width: 82vw;
    max-width: 320px;
    transform: translateX(-100%);
    transition: transform .3s ease;
    background: rgba(255, 255, 255, .97);
  }
  .site-header.is-open { transform: translateX(0); }
  .menu-toggle {
    display: block;
    position: fixed;
    left: 100%;
    top: 16px;
    margin-left: 16px;
    width: 48px; height: 48px;
    background: var(--color-main);
    border: none;
    cursor: pointer;
    z-index: 101;
  }
  .menu-toggle span {
    display: block;
    width: 22px; height: 2px;
    background: #fff;
    margin: 5px auto;
    transition: transform .3s ease, opacity .3s ease;
  }
  .site-header.is-open .menu-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .site-header.is-open .menu-toggle span:nth-child(2) { opacity: 0; }
  .site-header.is-open .menu-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .site-header__logo { height: 180px; margin-top: 0; }
  .site-header__logo a { font-size: 24px; }
  .global-nav { margin: 32px 0 0 32px; }
  .global-nav li { margin-bottom: 14px; }
  .site-header__buttons { margin: 24px 24px 0; }
  .global-nav + .site-header__buttons { margin-top: 32px; }
  .site-header__icons { margin: 32px 0 32px 32px; }

  /* 共通 */
  .inner { padding: 0 20px; }
  .sec-title { font-size: 26px; }
  .page-hero__title-lg { font-size: 34px; }
  .page-hero__heading { padding: 32px 20px 0; }
  .breadcrumb { padding-right: 20px; font-size: 11px; }
  .btn-frame { width: 100%; max-width: 300px; }

  /* MV */
  .mv { margin-left: 0; }
  .mv__img img { height: 72vh; }
  .mv__copy { left: 20px; top: 16%; font-size: 32px; }

  /* TOP */
  .top-intro { padding: 60px 0; }
  .top-intro__row { flex-direction: column; gap: 30px; }
  .top-intro__catch { font-size: 26px; height: 320px; }
  .top-intro__lead { font-size: 15px; }
  .top-intro__lead br { display: none; }
  .top-intro__img-sub { margin-top: 0; width: 200px; }
  .news-grid, .news-grid--col2, .news-grid--col3 { grid-template-columns: 1fr; gap: 48px; }
  .top-news, .top-concept, .top-product { padding: 60px 0; }
  .top-brand { padding: 80px 0; }
  .top-brand__features { grid-template-columns: 1fr; gap: 48px; margin-top: 60px; }
  .top-safety__row { flex-direction: column; }
  .top-safety__img, .top-safety__panel { width: 100%; margin-left: 0; border-radius: 0; }
  .top-safety__panel { padding: 40px 20px; }
  .top-safety__bag { position: static; width: 220px; margin: 24px auto 0; }
  .top-product__scroll { gap: 40px; }
  .product-card { flex: 0 0 70vw; }
  .cta-banner { flex-direction: column; border-radius: 24px; }
  .cta-banner__imgs { display: none; }
  .cta-banner__text { padding: 32px 24px 0; }
  .cta-banner__main { font-size: 24px; }
  .cta-banner__green { width: 100%; padding: 24px 24px 32px; font-size: 18px; }
  .cta-banner__green::after { right: 24px; }

  /* フッター */
  .site-footer__inner { padding: 60px 24px 24px; }
  .site-footer__nav { flex-direction: column; gap: 0; }
  .site-footer__totop { right: 20px; top: -56px; width: 90px; height: 90px; }
  .site-footer__copy { text-align: center; }

  /* 下層共通 */
  .page-hero__img img { height: 220px; }
  .page-hero--news__inner { flex-direction: column; align-items: stretch; min-height: 0; }
  .page-hero--news__img { width: 100%; }
  .page-hero--news__img img { height: 200px; }

  /* コンセプト */
  .concept-block__row { flex-direction: column; gap: 30px; }
  .concept-points { padding: 60px 0; }
  .concept-points__title { font-size: 26px; margin-bottom: 40px; }
  .concept-bags__row { flex-wrap: wrap; gap: 16px; padding-bottom: 48px; }
  .concept-bags__row img { width: calc((100% - 32px) / 3); }
  .concept-bags__row .btn-frame { margin: 24px auto 0; }
  .concept-bags__strip img { height: 300px; }
  .concept-message__photos { flex-direction: column; }
  .concept-message__photos img { width: 100%; }
  .company-profile__table > div { flex-direction: column; }

  /* ブランド */
  .page-hero--brand .page-hero__row { flex-direction: column; }
  .brand-six-years__panel { flex-direction: column; padding: 32px 20px; }
  .brand-kodawari__title { writing-mode: horizontal-tb; height: auto; font-size: 26px; text-align: center; }
  .kodawari-block, .kodawari-block--reverse { flex-direction: column; margin-bottom: 60px; }
  .kodawari-block__img { width: 100%; }
  .func-scroll { padding: 20px 20px 40px; }
  .func-card { flex: 0 0 70vw; }
  .brand-support__row { flex-direction: column; }
  .brand-support__img { width: 100%; }
  .brand-support__img img { border-radius: 0; height: 260px; }
  .brand-support__panel { width: 100%; margin-left: 0; border-radius: 0; padding: 32px 20px; }
  .repair-steps::before { left: 24px; }
  .repair-step { gap: 20px; }
  .repair-step__no { width: 48px; height: 48px; }
  .repair-step__no span { font-size: 9px; }
  .repair-step__no strong { font-size: 14px; }
  .repair-step__card { padding: 20px; }

  /* お問い合わせ */
  .contact-tel__bag { display: none; }
  .contact-tel__number { font-size: 32px; }
  .contact-tel__number img { width: 32px; }
  .form-steps { gap: 60px; }
  .form-steps::before { width: 80%; }
  .form-row { flex-direction: column; }
  .form-row__label { width: 100%; padding: 14px 20px; }
  .form-row__label .u-required { display: inline; margin-left: 12px; }
  .form-row__input { padding: 20px; }
  .form-row__input input { max-width: none; }

  /* 商品一覧・詳細 */
  .item-grid, .item-grid--col3 { grid-template-columns: 1fr; gap: 60px; }
  .item-filter__btn { min-width: calc((100% - 17px) / 2); height: 52px; }
  .item-purchase { flex-direction: column; gap: 40px; padding: 40px 0; }
  .item-purchase__gallery { width: 100%; }
  .item-guarantee__box { flex-direction: column; gap: 16px; }
  .item-guarantee__catch { font-size: 24px; text-align: center; }

  /* お知らせ */
  .news-single__title { font-size: 22px; }
  .post-nav { flex-direction: column; align-items: center; gap: 16px; }
}