@media (max-width: 767px) {
  .kodawari-page {
    background-color: #f7f1e7 !important;
    background-image:
      linear-gradient(rgba(247, 241, 231, .90), rgba(247, 241, 231, .90)),
      url("../images/washi-hero-bg.png") !important;
    background-repeat: repeat !important;
    background-size: auto, 880px auto !important;
    background-position: center top !important;
  }

  .kodawari-hero {
    padding: 0 0 24px !important;
  }

  .kodawari-hero .container,
  .kodawari-section .container {
    padding-inline: 14px !important;
  }

  .kodawari-hero__inner {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    overflow: visible !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .kodawari-hero__media {
    order: 1 !important;
    min-height: 0 !important;
    height: 54vw !important;
    max-height: 390px !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    box-shadow: none !important;
  }

  .kodawari-hero__media img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    display: block !important;
  }

  .kodawari-hero__body {
    order: 2 !important;
    position: relative !important;
    padding: 22px 18px 20px 82px !important;
    min-height: 0 !important;
    background:
      linear-gradient(rgba(247, 241, 231, .95), rgba(247, 241, 231, .95)),
      url("../images/washi-hero-bg.png") !important;
    background-repeat: repeat !important;
    background-size: auto, 760px auto !important;
    background-position: center top !important;
  }

  .kodawari-hero__body::before {
    content: "" !important;
    position: absolute !important;
    left: 6px !important;
    top: 12px !important;
    bottom: 12px !important;
    width: 64px !important;
    opacity: .22 !important;
    background: url("../images/sobahana-transparent.png") left top / contain no-repeat !important;
    pointer-events: none !important;
  }

  .kodawari-hero__en {
    margin: 0 0 8px !important;
    font-size: .72rem !important;
    letter-spacing: .18em !important;
  }

  .kodawari-hero__rule {
    width: 26px !important;
    margin: 0 0 14px !important;
  }

  .kodawari-hero__title {
    margin: 0 0 14px !important;
    font-size: 1.48rem !important;
    line-height: 1.4 !important;
    letter-spacing: .10em !important;
  }

  .kodawari-hero__catch {
    margin: 0 0 12px !important;
    font-size: 1.04rem !important;
    line-height: 1.72 !important;
    letter-spacing: .05em !important;
  }

  .kodawari-hero__text {
    max-width: none !important;
    font-size: .72rem !important;
    line-height: 1.95 !important;
  }

  .kodawari-section {
    padding: 0 0 14px !important;
  }

  .kodawari-section--first {
    padding-top: 0 !important;
  }

  .kodawari-section--last {
    padding-bottom: 18px !important;
  }

  .kodawari-block,
  .kodawari-block--reverse {
    display: grid !important;
    gap: 12px !important;
    align-items: stretch !important;
  }

  .kodawari-section--first .kodawari-block,
  .kodawari-section--first .kodawari-block--reverse {
    grid-template-columns: minmax(0, 39%) minmax(0, 61%) !important;
  }

  .kodawari-section:not(.kodawari-section--first):not(.kodawari-section--last) .kodawari-block,
  .kodawari-section:not(.kodawari-section--first):not(.kodawari-section--last) .kodawari-block--reverse {
    grid-template-columns: minmax(0, 53%) minmax(0, 47%) !important;
  }

  .kodawari-section--last .kodawari-block,
  .kodawari-section--last .kodawari-block--reverse,
  .kodawari-duck {
    grid-template-columns: minmax(0, 40%) minmax(0, 60%) !important;
  }

  .kodawari-block__content,
  .kodawari-material,
  .kodawari-duck__content {
    padding: 14px 14px 13px !important;
    border-radius: 6px !important;
    background:
      linear-gradient(rgba(255, 255, 255, .78), rgba(255, 255, 255, .78)),
      url("../images/washi-hero-bg.png") !important;
    background-repeat: repeat !important;
    background-size: auto, 700px auto !important;
    border: 1px solid rgba(218, 204, 180, .56) !important;
    box-shadow: 0 4px 14px rgba(46, 74, 62, .05) !important;
  }

  .kodawari-block__content--wide {
    padding-right: 14px !important;
  }

  .kodawari-block__label {
    min-width: 34px !important;
    height: 28px !important;
    padding: 0 8px !important;
    margin-bottom: 9px !important;
    font-size: .78rem !important;
    border-radius: 4px !important;
  }

  .kodawari-block__title,
  .kodawari-duck__title {
    margin: 0 0 8px !important;
    font-size: 1rem !important;
    line-height: 1.45 !important;
    letter-spacing: .06em !important;
  }

  .kodawari-block__lead,
  .kodawari-duck__lead {
    margin: 0 0 9px !important;
    font-size: .72rem !important;
    line-height: 1.72 !important;
    letter-spacing: .04em !important;
  }

  .kodawari-block__text,
  .kodawari-material__text,
  .kodawari-duck__text {
    margin: 0 !important;
    font-size: .68rem !important;
    line-height: 1.92 !important;
  }

  .kodawari-block__media,
  .kodawari-duck__media {
    border-radius: 6px !important;
    overflow: hidden !important;
    box-shadow: 0 4px 14px rgba(46, 74, 62, .08) !important;
    min-height: 0 !important;
    background: #efe7da !important;
  }

  .kodawari-section--first .kodawari-block__media {
    aspect-ratio: 1 / 1.22 !important;
  }

  .kodawari-section:not(.kodawari-section--first):not(.kodawari-section--last) .kodawari-block__media {
    aspect-ratio: 1 / .88 !important;
  }

  .kodawari-section--last .kodawari-block__media,
  .kodawari-duck__media {
    aspect-ratio: 1 / 1.22 !important;
  }

  .kodawari-block__media img,
  .kodawari-duck__media img {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    object-fit: cover !important;
    object-position: center center !important;
  }

  .kodawari-section--last .kodawari-block__media img,
  .kodawari-duck__media img {
    object-fit: contain !important;
    object-position: center center !important;
    background: #efe7da !important;
  }

  .kodawari-gallery {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    margin-top: 10px !important;
  }

  .kodawari-gallery__item {
    margin: 0 !important;
    border-radius: 4px !important;
    overflow: hidden !important;
    box-shadow: 0 3px 10px rgba(46, 74, 62, .07) !important;
  }

  .kodawari-gallery__item img {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    object-fit: cover !important;
    object-position: center center !important;
    aspect-ratio: 1 / .78 !important;
  }

  .kodawari-gallery__item:nth-child(3) {
    grid-column: 1 / -1 !important;
  }

  .kodawari-gallery__item:nth-child(3) img {
    aspect-ratio: 16 / 6 !important;
  }

  .kodawari-material {
    width: 100% !important;
  }

  .kodawari-points {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    margin-top: 12px !important;
  }

  .kodawari-points__item {
    min-height: 52px !important;
    padding: 10px 8px !important;
    font-size: .72rem !important;
    line-height: 1.5 !important;
    border-radius: 4px !important;
  }

  .kodawari-duck__points {
    display: grid !important;
    gap: 6px !important;
    margin: 10px 0 0 !important;
  }

  .kodawari-duck__point {
    display: grid !important;
    grid-template-columns: 24px 1fr !important;
    gap: 8px !important;
    align-items: start !important;
    font-size: .68rem !important;
    line-height: 1.8 !important;
  }

  .kodawari-duck__point-num {
    width: 24px !important;
    height: 24px !important;
    font-size: .68rem !important;
  }

  .kodawari-cta,
  .kodawari-actions,
  .kodawari-duck__actions {
    display: none !important;
  }

  .kodawari-final-message {
    margin: 22px auto 8px !important;
    padding: 0 18px !important;
    text-align: center !important;
    font-size: .94rem !important;
    line-height: 1.85 !important;
    letter-spacing: .08em !important;
    color: var(--c-primary) !important;
  }

  .ftr-logo-img {
    filter: brightness(0) invert(1) !important;
    opacity: 1 !important;
  }

  .ftr-name {
    color: #fff !important;
  }
}
/* =========================================================
   こだわりページ：スマホ表示 5点修正版
   - PC表示は変更しない
   - kodawari-responsive.css の最下部に追記
========================================================= */

@media (max-width: 767px) {

  /* =====================================================
     0. 全体調整：スマホの土台
  ===================================================== */

  body {
    overflow-x: hidden !important;
  }

  .kodawari-page {
    overflow-x: hidden !important;
    background-color: #f4eee2 !important;
    background-image:
      linear-gradient(rgba(244, 238, 226, .78), rgba(244, 238, 226, .78)),
      url("../images/washi-hero-bg.png") !important;
    background-repeat: repeat !important;
    background-size: auto, 920px auto !important;
    background-position: center top !important;
  }

  .kodawari-page .container {
    width: 100% !important;
    max-width: none !important;
    padding-inline: 24px !important;
    margin-inline: auto !important;
  }

  .kodawari-hero,
  .kodawari-section {
    width: 100% !important;
    overflow: hidden !important;
    background: transparent !important;
  }

  .kodawari-hero::before,
  .kodawari-hero::after,
  .kodawari-section::before,
  .kodawari-section::after {
    content: none !important;
  }


  /* =====================================================
     1. FV画像配置修正
     - 「真上にぼんっ！」感を弱める
     - 写真を導入ビジュアルとして自然に馴染ませる
  ===================================================== */

  .kodawari-hero {
    padding: 0 0 44px !important;
  }

  .kodawari-hero__inner {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
  }

  .kodawari-hero__media {
    order: 1 !important;
    position: relative !important;
    z-index: 1 !important;
    width: 100% !important;
    height: clamp(220px, 58vw, 300px) !important;
    min-height: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .kodawari-hero__media::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 2 !important;
    pointer-events: none !important;
    background:
      linear-gradient(
        180deg,
        rgba(244, 238, 226, 0) 0%,
        rgba(244, 238, 226, .10) 58%,
        rgba(244, 238, 226, .92) 100%
      );
  }

  .kodawari-hero__media::after {
    content: none !important;
  }

  .kodawari-hero__media img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    aspect-ratio: auto !important;
    object-fit: cover !important;
    object-position: center center !important;
    opacity: .90 !important;
    filter: saturate(.92) contrast(.96) brightness(1.04) !important;
  }

  .kodawari-hero__body {
    order: 2 !important;
    position: relative !important;
    z-index: 2 !important;
    width: 100% !important;
    max-width: none !important;
    margin-top: -12px !important;
    padding: 46px 32px 16px !important;
    background:
      linear-gradient(rgba(244, 238, 226, .70), rgba(244, 238, 226, .70)),
      url("../images/washi-hero-bg.png") !important;
    background-repeat: repeat !important;
    background-size: auto, 900px auto !important;
    background-position: center top !important;
    box-shadow: none !important;
  }

  .kodawari-hero__body::before,
  .kodawari-hero__body::after {
    content: none !important;
  }

  .kodawari-hero__inner::before {
    content: "" !important;
    position: absolute !important;
    left: 10px !important;
    top: 250px !important;
    width: 150px !important;
    height: 300px !important;
    z-index: 2 !important;
    pointer-events: none !important;
    background-image: url("../images/sobahana-transparent.png") !important;
    background-repeat: no-repeat !important;
    background-size: contain !important;
    background-position: left top !important;
    opacity: .16 !important;
    mix-blend-mode: multiply !important;
  }

  .kodawari-hero__body > * {
    position: relative !important;
    z-index: 3 !important;
  }

  .kodawari-hero__en {
    margin: 0 0 12px !important;
    color: #9a7a3a !important;
    font-family: var(--font-sans) !important;
    font-size: .70rem !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    letter-spacing: .30em !important;
  }

  .kodawari-hero__rule {
    width: 48px !important;
    height: 1px !important;
    margin: 0 0 28px !important;
    background: #9a7a3a !important;
  }

  .kodawari-hero__title {
    margin: 0 0 24px !important;
    color: var(--c-primary) !important;
    font-family: var(--font-serif) !important;
    font-size: 2rem !important;
    line-height: 1.45 !important;
    letter-spacing: .12em !important;
    white-space: normal !important;
    word-break: keep-all !important;
    overflow-wrap: anywhere !important;
  }

  .kodawari-hero__catch {
    margin: 0 0 24px !important;
    color: var(--c-text) !important;
    font-family: var(--font-serif) !important;
    font-size: 1.26rem !important;
    line-height: 1.9 !important;
    letter-spacing: .07em !important;
  }

  .kodawari-hero__text {
    max-width: none !important;
    margin: 0 !important;
    color: rgba(42, 42, 42, .78) !important;
    font-size: .86rem !important;
    line-height: 2.05 !important;
    letter-spacing: .04em !important;
  }


  /* =====================================================
     2. 01・02の縦長画像問題を修正
     - スマホでは横並びをやめる
     - 画像は自然な横長/準横長に統一
  ===================================================== */

  .kodawari-section {
    padding: 0 0 52px !important;
  }

  .kodawari-section--first {
    padding-top: 8px !important;
  }

  .kodawari-section--last {
    padding-bottom: 64px !important;
  }

  .kodawari-block,
  .kodawari-block--reverse,
  .kodawari-duck {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: none !important;
    gap: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  .kodawari-block__content,
  .kodawari-material,
  .kodawari-duck__content {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 40px 32px !important;
    background:
      linear-gradient(rgba(244, 238, 226, .68), rgba(244, 238, 226, .68)),
      url("../images/washi-hero-bg.png") !important;
    background-repeat: repeat !important;
    background-size: auto, 900px auto !important;
    background-position: center top !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  .kodawari-block__media {
    width: calc(100% - 48px) !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 auto 28px !important;
    overflow: hidden !important;
    border-radius: 4px !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .kodawari-block__media img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 16 / 11 !important;
    object-fit: cover !important;
    object-position: center center !important;
    opacity: .94 !important;
  }

  /* 01：画像 → 説明 */
  .kodawari-section--first .kodawari-block__media {
    order: 1 !important;
  }

  .kodawari-section--first .kodawari-block__content {
    order: 2 !important;
  }

  /* 02：説明 → メイン画像 → 工程写真 */
  .kodawari-section:not(.kodawari-section--first):not(.kodawari-section--last) .kodawari-block__content {
    order: 1 !important;
  }

  .kodawari-section:not(.kodawari-section--first):not(.kodawari-section--last) .kodawari-block__media {
    order: 2 !important;
    margin-top: 26px !important;
    margin-bottom: 26px !important;
  }

  .kodawari-section:not(.kodawari-section--first):not(.kodawari-section--last) .kodawari-block__media img {
    aspect-ratio: 16 / 10 !important;
    object-position: center center !important;
  }


  /* =====================================================
     見出し・本文共通
  ===================================================== */

  .kodawari-block__label {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 54px !important;
    min-width: 54px !important;
    height: 50px !important;
    margin: 0 0 26px !important;
    padding: 0 !important;
    border-radius: 5px !important;
    background: var(--c-primary) !important;
    color: #fff !important;
    font-family: var(--font-sans) !important;
    font-size: .94rem !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    letter-spacing: .08em !important;
  }

  .kodawari-block__title {
    margin: 0 0 22px !important;
    color: var(--c-primary) !important;
    font-family: var(--font-serif) !important;
    font-size: 1.95rem !important;
    line-height: 1.48 !important;
    letter-spacing: .09em !important;
    white-space: normal !important;
    word-break: keep-all !important;
    overflow-wrap: anywhere !important;
  }

  .kodawari-block__lead {
    margin: 0 0 24px !important;
    color: #8a7245 !important;
    font-family: var(--font-serif) !important;
    font-size: 1.03rem !important;
    font-weight: 700 !important;
    line-height: 1.85 !important;
    letter-spacing: .05em !important;
  }

  .kodawari-block__text,
  .kodawari-material__text,
  .kodawari-duck__closing {
    margin: 0 !important;
    color: rgba(42, 42, 42, .92) !important;
    font-size: .95rem !important;
    line-height: 2.05 !important;
    letter-spacing: .04em !important;
  }

  .kodawari-block__text br,
  .kodawari-material__text br {
    display: none !important;
  }


  /* =====================================================
     3. 02下の工程写真：横スクロール化
  ===================================================== */

  .kodawari-gallery {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 14px !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 24px 12px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .kodawari-gallery::-webkit-scrollbar {
    height: 5px !important;
  }

  .kodawari-gallery::-webkit-scrollbar-track {
    background: rgba(46, 74, 62, .08) !important;
    border-radius: 999px !important;
  }

  .kodawari-gallery::-webkit-scrollbar-thumb {
    background: rgba(46, 74, 62, .32) !important;
    border-radius: 999px !important;
  }

  .kodawari-gallery__item {
    flex: 0 0 78% !important;
    width: 78% !important;
    margin: 0 !important;
    overflow: hidden !important;
    border-radius: 4px !important;
    background: transparent !important;
    box-shadow: 0 4px 14px rgba(46, 74, 62, .08) !important;
    scroll-snap-align: center !important;
  }

  .kodawari-gallery__item img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 10.5 !important;
    object-fit: cover !important;
    object-position: center center !important;
  }


  /* =====================================================
     4. 鴨せいろ画像の余白・配置見直し
     - ベージュの大きな余白をなくす
     - 画像 → 説明の自然な縦積み
  ===================================================== */

  .kodawari-duck__media {
    order: 1 !important;
    width: calc(100% - 48px) !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 auto 28px !important;
    padding: 0 !important;
    overflow: hidden !important;
    border-radius: 4px !important;
    background: transparent !important;
    box-shadow: 0 4px 14px rgba(46, 74, 62, .08) !important;
  }

  .kodawari-duck__media img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 16 / 11 !important;
    object-fit: cover !important;
    object-position: center center !important;
    opacity: .98 !important;
    background: transparent !important;
  }

  .kodawari-duck__content {
    order: 2 !important;
    padding-top: 42px !important;
  }


  /* =====================================================
     5. 04内の丸番号と説明文の重なり修正
  ===================================================== */

  .kodawari-duck__points {
    display: grid !important;
    gap: 18px !important;
    margin: 32px 0 34px !important;
    padding: 0 !important;
  }

  .kodawari-duck__point {
    display: grid !important;
    grid-template-columns: 46px minmax(0, 1fr) !important;
    gap: 18px !important;
    align-items: start !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  .kodawari-duck__point span,
  .kodawari-duck__point-num {
    grid-column: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 42px !important;
    min-width: 42px !important;
    height: 42px !important;
    border-radius: 50% !important;
    background: var(--c-primary) !important;
    color: #fff !important;
    font-family: var(--font-sans) !important;
    font-size: .78rem !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    letter-spacing: .06em !important;
  }

  .kodawari-duck__point p {
    grid-column: 2 !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding-top: 2px !important;
    color: rgba(42, 42, 42, .92) !important;
    font-size: .94rem !important;
    line-height: 1.9 !important;
    letter-spacing: .04em !important;
  }


  /* =====================================================
     03：そば粉セクション
  ===================================================== */

  .kodawari-material {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }

  .kodawari-material .kodawari-block__title {
    font-size: 1.86rem !important;
    line-height: 1.55 !important;
  }

  .kodawari-points {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    margin: 32px 0 0 !important;
  }

  .kodawari-points__item {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 62px !important;
    padding: 14px 18px !important;
    color: var(--c-primary) !important;
    font-family: var(--font-serif) !important;
    font-size: .96rem !important;
    line-height: 1.6 !important;
    letter-spacing: .06em !important;
    text-align: center !important;
    background: rgba(255, 255, 255, .18) !important;
    border: 1px solid rgba(46, 74, 62, .35) !important;
    border-radius: 2px !important;
    box-shadow: none !important;
  }


  /* =====================================================
     不要ボタン削除
  ===================================================== */

  .kodawari-cta,
  .kodawari-duck__actions,
  .kodawari-actions {
    display: none !important;
  }

  .kodawari-final-message {
    width: calc(100% - 64px) !important;
    max-width: none !important;
    margin: 54px auto 0 !important;
    color: var(--c-primary) !important;
    font-family: var(--font-serif) !important;
    font-size: 1.12rem !important;
    line-height: 2.05 !important;
    letter-spacing: .07em !important;
    text-align: center !important;
  }


  /* =====================================================
     フッター
  ===================================================== */

  .ftr {
    margin-top: 0 !important;
  }

  .ftr-logo-img {
    width: 150px !important;
    height: auto !important;
    filter: brightness(0) invert(1) !important;
    opacity: .95 !important;
    background: transparent !important;
  }
}


/* =========================================================
   さらに狭いスマホ用
========================================================= */

@media (max-width: 430px) {

  .kodawari-page .container {
    padding-inline: 24px !important;
  }

  .kodawari-hero__body,
  .kodawari-block__content,
  .kodawari-material,
  .kodawari-duck__content {
    padding-left: 32px !important;
    padding-right: 32px !important;
  }

  .kodawari-hero__title {
    font-size: 1.92rem !important;
  }

  .kodawari-hero__catch {
    font-size: 1.22rem !important;
  }

  .kodawari-block__title {
    font-size: 1.82rem !important;
  }

  .kodawari-block__lead {
    font-size: 1rem !important;
  }

  .kodawari-block__text,
  .kodawari-material__text,
  .kodawari-duck__closing,
  .kodawari-duck__point p {
    font-size: .92rem !important;
  }

  .kodawari-gallery__item {
    flex-basis: 82% !important;
    width: 82% !important;
  }

  .kodawari-hero__inner::before {
    left: 8px !important;
    top: 238px !important;
    width: 132px !important;
    height: 270px !important;
    opacity: .13 !important;
  }
}
/* =========================================================
   こだわりページ：スマホ表示 追加修正版
   - PC表示は変更しない
   - FV画像をテキスト下へ
   - 01画像を説明文下へ
   - 02単体画像を横スクロールへ統合
   - 04画像を説明文下へ
========================================================= */

/* PCではスマホ用追加画像を非表示 */
.kodawari-gallery__item--main-sp {
  display: none;
}

@media (max-width: 767px) {

  /* =====================================================
     1. ファーストビュー画像を「こだわり説明」の下に配置
     - 画像の上下切り抜きもやめる
  ===================================================== */

  .kodawari-hero {
    padding: 0 0 48px !important;
  }

  .kodawari-hero__inner {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    overflow: visible !important;
  }

  .kodawari-hero__body {
    order: 1 !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 56px 32px 34px !important;
    background:
      linear-gradient(rgba(244, 238, 226, .70), rgba(244, 238, 226, .70)),
      url("../images/washi-hero-bg.png") !important;
    background-repeat: repeat !important;
    background-size: auto, 900px auto !important;
    background-position: center top !important;
    box-shadow: none !important;
  }

  .kodawari-hero__media {
    order: 2 !important;
    width: calc(100% - 48px) !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 18px auto 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border-radius: 4px !important;
    background: transparent !important;
    box-shadow: 0 4px 14px rgba(46, 74, 62, .08) !important;
  }

  .kodawari-hero__media::before,
  .kodawari-hero__media::after {
    content: none !important;
  }

  .kodawari-hero__media img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: auto !important;
    object-fit: contain !important;
    object-position: center center !important;
    opacity: .94 !important;
    filter: saturate(.94) contrast(.96) brightness(1.03) !important;
  }


  /* =====================================================
     2. 01セクション：説明文の下に画像を配置
     - 画像下の余白も整理
  ===================================================== */

  .kodawari-section--first .kodawari-block {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
  }

  .kodawari-section--first .kodawari-block__content {
    order: 1 !important;
    padding-bottom: 28px !important;
  }

  .kodawari-section--first .kodawari-block__media {
    order: 2 !important;
    width: calc(100% - 48px) !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 auto 0 !important;
    padding: 0 !important;
    border-radius: 4px !important;
    overflow: hidden !important;
    background: transparent !important;
    box-shadow: 0 4px 14px rgba(46, 74, 62, .08) !important;
  }

  .kodawari-section--first .kodawari-block__media img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: auto !important;
    object-fit: contain !important;
    object-position: center center !important;
    opacity: .96 !important;
  }


  /* =====================================================
     3. 02セクション：単体画像を横スクロール側へ統合
     - 既存の単体画像はスマホでは非表示
     - 追加した .kodawari-gallery__item--main-sp を表示
  ===================================================== */

  .kodawari-section:not(.kodawari-section--first):not(.kodawari-section--last) .kodawari-block {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
  }

  .kodawari-section:not(.kodawari-section--first):not(.kodawari-section--last) .kodawari-block__content {
    order: 1 !important;
    padding-bottom: 30px !important;
  }

  /* 02の単体画像はスマホでは非表示 */
  .kodawari-section:not(.kodawari-section--first):not(.kodawari-section--last) .kodawari-block__media {
    display: none !important;
  }

  .kodawari-gallery {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 14px !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 24px 14px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .kodawari-gallery__item,
  .kodawari-gallery__item--main-sp {
    display: block !important;
    flex: 0 0 82% !important;
    width: 82% !important;
    margin: 0 !important;
    overflow: hidden !important;
    border-radius: 4px !important;
    background: transparent !important;
    box-shadow: 0 4px 14px rgba(46, 74, 62, .08) !important;
    scroll-snap-align: center !important;
  }

  .kodawari-gallery__item img,
  .kodawari-gallery__item--main-sp img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: auto !important;
    object-fit: contain !important;
    object-position: center center !important;
    background: transparent !important;
  }

  .kodawari-gallery::-webkit-scrollbar {
    height: 5px !important;
  }

  .kodawari-gallery::-webkit-scrollbar-track {
    background: rgba(46, 74, 62, .08) !important;
    border-radius: 999px !important;
  }

  .kodawari-gallery::-webkit-scrollbar-thumb {
    background: rgba(46, 74, 62, .32) !important;
    border-radius: 999px !important;
  }


  /* =====================================================
     4. 04セクション：画像を説明文の下へ配置
     - 画像下の余白を削除
     - 最終コピーの上に置く
  ===================================================== */

  .kodawari-section--last {
    padding-bottom: 52px !important;
  }

  .kodawari-section--last .kodawari-duck,
  .kodawari-duck {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
  }

  .kodawari-duck__content {
    order: 1 !important;
    padding-bottom: 30px !important;
  }

  .kodawari-duck__media {
    order: 2 !important;
    width: calc(100% - 48px) !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 auto 0 !important;
    padding: 0 !important;
    border-radius: 4px !important;
    overflow: hidden !important;
    background: transparent !important;
    box-shadow: 0 4px 14px rgba(46, 74, 62, .08) !important;
  }

  .kodawari-duck__media img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: auto !important;
    object-fit: contain !important;
    object-position: center center !important;
    opacity: .98 !important;
    background: transparent !important;
  }

  .kodawari-final-message {
    margin-top: 42px !important;
  }


  /* =====================================================
     5. 04内の丸番号と説明文の重なり防止
  ===================================================== */

  .kodawari-duck__points {
    display: grid !important;
    gap: 18px !important;
    margin: 32px 0 32px !important;
    padding: 0 !important;
  }

  .kodawari-duck__point {
    display: grid !important;
    grid-template-columns: 46px minmax(0, 1fr) !important;
    gap: 18px !important;
    align-items: start !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  .kodawari-duck__point span,
  .kodawari-duck__point-num {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 42px !important;
    min-width: 42px !important;
    height: 42px !important;
    border-radius: 50% !important;
    background: var(--c-primary) !important;
    color: #fff !important;
    font-family: var(--font-sans) !important;
    font-size: .78rem !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    letter-spacing: .06em !important;
  }

  .kodawari-duck__point p {
    min-width: 0 !important;
    margin: 0 !important;
    padding-top: 2px !important;
    color: rgba(42, 42, 42, .92) !important;
    font-size: .94rem !important;
    line-height: 1.9 !important;
    letter-spacing: .04em !important;
  }
}
/* =========================================================
   こだわりページ：工程ギャラリー修正版
   - PC表示を壊さない
   - スマホ時だけ横スクロール化
   - 画像サイズを統一
   - 謎の余白を削除
========================================================= */

/* PCではスマホ用追加画像を非表示 */
.kodawari-gallery__item--main-sp {
  display: none !important;
}

/* PC側のギャラリー崩れ防止 */
.kodawari-gallery {
  box-sizing: border-box;
}

.kodawari-gallery__item {
  box-sizing: border-box;
  margin: 0;
}

.kodawari-gallery__item img {
  display: block;
  width: 100%;
  height: 100%;
}


/* スマホ表示のみ */
@media (max-width: 767px) {

  /* 02の通常単体画像は非表示 */
  .kodawari-section:not(.kodawari-section--first):not(.kodawari-section--last) .kodawari-block__media {
    display: none !important;
  }

  /* 横スクロール全体 */
  .kodawari-gallery {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 14px !important;

    width: 100% !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 0 24px 14px !important;

    overflow-x: auto !important;
    overflow-y: hidden !important;

    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* 画像カードをすべて同じサイズに統一 */
  .kodawari-gallery__item,
  .kodawari-gallery__item--main-sp {
    display: block !important;

    flex: 0 0 82% !important;
    width: 82% !important;
    height: 230px !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden !important;
    border-radius: 4px !important;

    background: transparent !important;
    box-shadow: 0 4px 14px rgba(46, 74, 62, .08) !important;

    scroll-snap-align: center !important;
  }

  /* 画像自体も均一化 */
  .kodawari-gallery__item img,
  .kodawari-gallery__item--main-sp img {
    display: block !important;

    width: 100% !important;
    height: 100% !important;

    object-fit: cover !important;
    object-position: center center !important;

    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;
  }

  /* 画像ごとの見切れ位置を個別調整 */
  .kodawari-gallery__item--main-sp img {
    object-position: center center !important;
  }

  .kodawari-gallery__item:nth-child(2) img {
    object-position: center center !important;
  }

  .kodawari-gallery__item:nth-child(3) img {
    object-position: center center !important;
  }

  .kodawari-gallery__item:nth-child(4) img {
    object-position: center center !important;
  }

  /* スクロールバー */
  .kodawari-gallery::-webkit-scrollbar {
    height: 5px !important;
  }

  .kodawari-gallery::-webkit-scrollbar-track {
    background: rgba(46, 74, 62, .08) !important;
    border-radius: 999px !important;
  }

  .kodawari-gallery::-webkit-scrollbar-thumb {
    background: rgba(46, 74, 62, .32) !important;
    border-radius: 999px !important;
  }
}


/* さらに狭いスマホ */
@media (max-width: 430px) {

  .kodawari-gallery {
    padding-inline: 24px !important;
  }

  .kodawari-gallery__item,
  .kodawari-gallery__item--main-sp {
    flex-basis: 82% !important;
    width: 82% !important;
    height: 210px !important;
  }
}
/* =========================================================
   こだわりページ 03：JAピンネ「牡丹そば」のぼり画像
========================================================= */

.kodawari-material__photo {
  width: min(100%, 760px);
  margin: 28px auto 0;
  overflow: hidden;
  border-radius: 6px;
  box-shadow: 0 6px 18px rgba(46, 74, 62, .08);
}

.kodawari-material__photo img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* スマホ表示 */
@media (max-width: 767px) {
  .kodawari-material__photo {
    width: 100%;
    margin-top: 26px;
    border-radius: 4px;
  }
}
/* =========================================================
   こだわりページ 03：牡丹そば画像 + ポイントカード
========================================================= */

.kodawari-material__visual {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(360px, 0.95fr);
  gap: 32px;
  align-items: stretch;
  margin-top: 32px;
}

.kodawari-material__photo {
  width: 100%;
  margin: 0;
  overflow: hidden;
  border-radius: 6px;
  box-shadow: 0 6px 18px rgba(46, 74, 62, 0.08);
}

.kodawari-material__photo img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 300px;
  object-fit: cover;
  object-position: center center;
}

.kodawari-material__visual .kodawari-points {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin: 0;
  align-content: center;
}

.kodawari-material__visual .kodawari-points__item {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 92px;
  padding: 18px 16px;
  border: 1px solid rgba(46, 74, 62, 0.34);
  background: rgba(255, 255, 255, 0.42);
  color: #284f41;
  font-family: "Noto Serif JP", serif;
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: 0.06em;
  text-align: center;
}

/* スマホ表示 */
@media (max-width: 767px) {
  .kodawari-material__visual {
    display: block;
    margin-top: 28px;
  }

  .kodawari-material__photo {
    width: 100%;
    margin: 0 0 24px;
    border-radius: 4px;
  }

  .kodawari-material__photo img {
    width: 100%;
    height: auto;
    min-height: 0;
    object-fit: contain;
  }

  .kodawari-material__visual .kodawari-points {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    margin: 0;
  }

  .kodawari-material__visual .kodawari-points__item {
    min-height: 72px;
    padding: 16px 14px;
    font-size: 1rem;
  }
}

/* =========================================================
   こだわりページ 04：鴨せいろセクション左右反転
   PC：左に文章 / 右に画像
   SP：縦並びを維持
========================================================= */

@media (min-width: 768px) {
  .kodawari-duck {
    display: grid;
    grid-template-columns: minmax(420px, 0.95fr) minmax(0, 1.05fr);
    gap: 40px;
    align-items: stretch;
  }

  .kodawari-duck__content {
    order: 1;
  }

  .kodawari-duck__media {
    order: 2;
    margin: 0;
  }

  .kodawari-duck__media img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 420px;
    object-fit: cover;
    object-position: center center;
  }
}

/* =========================================================
   04 鴨せいろ画像：スマホ時の余分な下余白を削除
========================================================= */

@media (max-width: 767px) {
  .kodawari-duck__media {
    width: 100%;
    margin: 0 0 32px;
    padding: 0;
    height: auto;
    min-height: 0;
    background: transparent;
    box-shadow: none;
  }

  .kodawari-duck__media img {
    display: block;
    width: 100%;
    height: auto;
    min-height: 0;
    object-fit: contain;
    object-position: center center;
    border-radius: 6px;
  }
}
/* =========================================================
   04 鴨せいろ画像：スマホ時の余白完全修正
   原因：過去の aspect-ratio: 1 / 1.22 が残っていたため
========================================================= */

@media (max-width: 767px) {
  .kodawari-duck__media {
    display: block !important;
    width: calc(100% - 48px) !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: auto !important;
    margin: 0 auto 32px !important;
    padding: 0 !important;
    overflow: hidden !important;
    border-radius: 4px !important;
    background: transparent !important;
    box-shadow: 0 4px 14px rgba(46, 74, 62, .08) !important;
    line-height: 0 !important;
  }

  .kodawari-duck__media img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: auto !important;
    object-fit: initial !important;
    object-position: center center !important;
    background: transparent !important;
    border-radius: 4px !important;
  }
}
/* =========================================================
   こだわりページ：03セクションの特徴カード文字調整
   PC時に「JAピンネ『牡丹そば』」を1行表示
========================================================= */

@media (min-width: 768px) {
  .kodawari-points__item {
    white-space: nowrap;
    font-size: clamp(0.95rem, 1.1vw, 1.05rem);
    letter-spacing: 0.03em;
    padding-left: 12px;
    padding-right: 12px;
  }
}

@media (max-width: 767px) {
  .kodawari-points__item {
    white-space: normal;
  }
}