/* === Pain au mayu - 共通レスポンシブCSS === */

/* === スムーズスクロール === */
html {
  scroll-behavior: smooth;
}

/* === 共通カードデザイン === */
.lesson-card {
  background: rgba(255, 255, 255, 0.9);
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 32px;
  box-shadow: 0 4px 10px rgba(184, 134, 11, 0.1);
  text-align: left;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

.section-title {
  font-family: 'AR P教科書体M', serif;
  font-size: 1.4em;
  color: rgb(255, 0, 128);
  font-weight: bold;
  border-bottom: 2px solid #f4f1e9;
  padding-bottom: 8px;
  margin-bottom: 12px;
  line-height: 1.4;
}

.body-text {
  font-family: 'AR P教科書体M', serif;
  font-size: 1em;
  line-height: 2.0;
  color: #4c4c4c;
  margin-bottom: 1.2em;
}

.body-text:last-child {
  margin-bottom: 0;
}

.highlight-text {
  color: rgb(255, 0, 128);
  font-weight: bold;
}

.price-info {
  color: rgb(255, 0, 128);
  font-family: 'AR P教科書体M', serif;
  font-size: 1em;
  line-height: 2.0;
  margin-bottom: 1.2em;
}

.note-text {
  color: #6e9d45;
  font-family: 'AR P教科書体M', serif;
  font-size: 0.9em;
  line-height: 2.0;
  margin-bottom: 1.2em;
}

.image-gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 20px 0;
}

.image-gallery img {
  border-radius: 8px;
  width: 200px;
  height: 200px;
  object-fit: cover;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* === PC表示：折りたたみは常に展開、summaryは非表示 === */
.collapsible-details > summary,
.read-more > summary {
  display: none;
}

/* === PC表示：スマホ専用要素を非表示 === */
.menu-toggle { display: none !important; }
.menu-overlay { display: none !important; }
.floating-cta { display: none !important; }
.back-to-top { display: none !important; }
.header-logo { display: none !important; }
.header-logo-wrapper { display: none !important; }

/* === PC表示専用（641px以上） === */
@media screen and (min-width: 641px) {
  .image-gallery img {
    width: 200px;
    height: 200px;
  }

  #hpb-nav a:hover,
  .hpb-parts-cnt-01 a:hover,
  #banner a:hover {
    opacity: 0.7 !important;
    transition: opacity 0.2s ease !important;
  }

  #hpb-container #hpb-header #hpb-headerLogo {
    display: block !important;
    text-align: center !important;
    overflow: visible !important;
    height: 140px !important;
    margin: 0 auto !important;
    padding: 0 !important;
  }

  #hpb-container #hpb-header #hpb-headerLogo a {
    display: inline-block !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 140px !important;
    vertical-align: middle !important;
  }

  #hpb-headerLogo img {
    max-width: 100% !important;
    height: auto !important;
  }
}

/* === スマホ（640px以下） === */
@media screen and (max-width: 640px) {

  /* === CSS変数 === */
  :root {
    --color-pink: rgb(255, 0, 128);
    --color-logo: #b8860b;
    --color-text: #594a3e;
    --color-text-light: #8a7a6a;
    --color-bg: #f4f1e9;
    --color-white: #ffffff;
    --color-title-bg: #c4b59d;
    --color-footer-bg: #5a4a3e;
    --font-logo: 'Tangerine', cursive;
    --font-body: 'Shippori Mincho', 'Hiragino Mincho ProN', 'Yu Mincho', serif;
    --nav-height: 48px;
  }

  /* === UX改善 === */
  body {
    user-select: text !important;
    -webkit-user-select: text !important;
  }

  img {
    -webkit-user-drag: none !important;
    user-select: none !important;
    -webkit-user-select: none !important;
    -webkit-touch-callout: none !important;
  }

  a {
    -webkit-tap-highlight-color: rgba(255, 0, 128, 0.1) !important;
  }

  button, a, input, select, textarea {
    touch-action: manipulation !important;
  }

  html {
    overscroll-behavior: none !important;
  }

  a[target="_blank"]::after {
    content: " \01F517" !important;
    font-size: 0.7em !important;
    opacity: 0.8 !important;
    margin-left: 2px !important;
  }

  .floating-cta a::after,
  #banner a[href*="cookingschool"]::after {
    content: none !important;
  }

  a:active {
    opacity: 0.7 !important;
  }

  /* === ベースリセット === */
  * {
    box-sizing: border-box !important;
    max-width: 100% !important;
    -webkit-tap-highlight-color: transparent;
  }

  body {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    padding-top: var(--nav-height) !important;
    padding-bottom: 80px !important;
    text-align: center !important;
    -webkit-text-size-adjust: 100%;
    background: var(--color-bg) !important;
    background-image: none !important;
    font-family: var(--font-body) !important;
    color: var(--color-text) !important;
    font-size: 14px !important;
    line-height: 1.8 !important;
    overflow-x: hidden !important;
  }

  /* === 構造リセット === */
  table, thead, tbody, tfoot, tr, th, td, div, p, center {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    float: none !important;
    clear: both !important;
    margin: 0 auto !important;
    background: none !important;
    border: none !important;
    position: static !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* === コンテナ === */
  #hpb-container {
    background: var(--color-bg) !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
  }

  /* === ハンバーガーメニュー === */
  .menu-toggle {
    display: flex !important;
    position: absolute !important;
    left: 12px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-size: 14px !important;
    color: var(--color-text) !important;
    font-weight: 500 !important;
    letter-spacing: 0.05em !important;
    z-index: 1001 !important;
    cursor: pointer !important;
    background: none !important;
    border: none !important;
    padding: 8px 12px !important;
    border-radius: 4px !important;
    align-items: center !important;
    gap: 6px !important;
  }

  .menu-toggle:active {
    background: rgba(0,0,0,0.05) !important;
  }

  /* メニューオーバーレイ */
  .menu-overlay {
    display: none !important;
    position: fixed !important;
    top: var(--nav-height) !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: rgba(0,0,0,0.3) !important;
    z-index: 998 !important;
  }

  .menu-overlay.is-open {
    display: block !important;
  }

  /* === ナビゲーション === */
  #hpb-nav {
    order: -1 !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 1000 !important;
    width: 100% !important;
    height: var(--nav-height) !important;
    padding: 0 !important;
    background: var(--color-bg) !important;
    border-bottom: 1px solid rgba(0,0,0,0.06) !important;
  }

  #hpb-nav::after { display: none !important; }

  /* ナビバー内ロゴ */
  #hpb-nav .header-logo {
    display: block !important;
    position: absolute !important;
    left: auto !important;
    right: 16px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-family: 'Tangerine', cursive !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    color: var(--color-text) !important;
    text-decoration: none !important;
    letter-spacing: 0.02em !important;
    z-index: 1001 !important;
    cursor: pointer !important;
  }

  #hpb-nav .header-logo:active { opacity: 0.7 !important; }

  .header-logo-wrapper { display: none !important; }

  /* メニューリスト */
  #hpb-nav ul {
    display: none !important;
    position: fixed !important;
    top: var(--nav-height) !important;
    left: 0 !important;
    right: 0 !important;
    background: var(--color-bg) !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1) !important;
    border-bottom: 1px solid rgba(0,0,0,0.1) !important;
    flex-direction: column !important;
    z-index: 999 !important;
    max-height: 70vh !important;
    overflow-y: auto !important;
  }

  #hpb-nav ul.is-open { display: flex !important; }

  #hpb-nav li {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border-bottom: 1px solid rgba(0,0,0,0.05) !important;
  }

  #hpb-nav li:last-child { border-bottom: none !important; }

  #hpb-nav a {
    display: block !important;
    width: 100% !important;
    padding: 16px 20px !important;
    color: var(--color-pink) !important;
    font-family: var(--font-body) !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    text-align: left !important;
    line-height: 1.4 !important;
  }

  #hpb-nav a:active { background: rgba(255, 0, 128, 0.1) !important; }

  #hpb-nav a font,
  #hpb-nav a span {
    color: inherit !important;
    font-family: inherit !important;
    font-size: inherit !important;
    display: inline !important;
    background: none !important;
    padding: 0 !important;
  }

  #hpb-nav a br { display: none !important; }

  /* === ヘッダー === */
  #hpb-header {
    order: 1 !important;
    padding: 8px 16px 0 !important;
    background: var(--color-bg) !important;
  }

  #hpb-headerMain {
    margin: 0 0 4px 0 !important;
    padding: 0 !important;
  }

  #hpb-headerMain h1 {
    font-family: var(--font-body) !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    font-style: italic !important;
    color: var(--color-text-light) !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.4 !important;
  }

  #hpb-headerMain h1 font {
    font-family: inherit !important;
    font-size: inherit !important;
    color: inherit !important;
    font-style: inherit !important;
  }

  #hpb-headerLogo {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
  }

  #hpb-headerLogo::before {
    content: '\01F33E' !important;
    display: inline-block !important;
    font-size: 36px !important;
    vertical-align: middle !important;
    margin-right: 2px !important;
    filter: sepia(1) saturate(0.5) !important;
  }

  #hpb-headerLogo::after {
    content: 'Pain au mayu' !important;
    font-family: var(--font-logo) !important;
    font-size: 60px !important;
    font-weight: 700 !important;
    color: var(--color-logo) !important;
    display: inline-block !important;
    vertical-align: middle !important;
    line-height: 1 !important;
  }

  #hpb-headerLogo a,
  #hpb-headerLogo img,
  #hpb-headerLogo br { display: none !important; }

  #hpb-headerExtra1 {
    margin: 0 !important;
    padding: 0 !important;
    text-align: right !important;
    line-height: 1 !important;
  }

  #hpb-headerExtra1 .tel {
    font-family: var(--font-body) !important;
    font-size: 11px !important;
    font-style: italic !important;
    color: var(--color-text-light) !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.4 !important;
  }

  #hpb-headerExtra1 p {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.4 !important;
  }

  #hpb-headerExtra1 font,
  #hpb-headerExtra1 span {
    font-family: inherit !important;
    color: inherit !important;
    font-style: inherit !important;
    line-height: 1.4 !important;
  }

  /* === inner/wrapper === */
  #hpb-inner {
    order: 2 !important;
    display: flex !important;
    flex-direction: column !important;
  }

  #hpb-wrapper { order: 1 !important; }

  /* === タイトル === */
  #hpb-title {
    height: auto !important;
    min-height: auto !important;
    background-image: none !important;
    background-color: var(--color-bg) !important;
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 20px 20px !important;
    border-radius: 0 !important;
    box-sizing: border-box !important;
    text-align: left !important;
    overflow: visible !important;
  }

  #hpb-title::after { display: none !important; }

  #hpb-title h2,
  #hpb-title h3 {
    font-family: 'HGS\6559\79D1\66F8\4F53', var(--font-body) !important;
    font-size: 22px !important;
    font-weight: bold !important;
    line-height: 1.7 !important;
    color: #6e9d45 !important;
    margin: 0 !important;
    padding: 0 !important;
    letter-spacing: 0.05em !important;
    background: transparent !important;
    display: block !important;
    width: auto !important;
    text-align: left !important;
    height: auto !important;
  }

  #hpb-title h2 span,
  #hpb-title h2 font,
  #hpb-title h3 span,
  #hpb-title h3 font {
    font-family: inherit !important;
    font-size: inherit !important;
    color: inherit !important;
    background: none !important;
    display: inline !important;
  }

  /* === メインコンテンツ === */
  #hpb-main {
    padding: 0 !important;
    background: var(--color-bg) !important;
  }

  .hpb-parts-cnt-01 {
    padding: 16px 20px !important;
    background: var(--color-bg) !important;
    text-align: left !important;
    color: var(--color-text) !important;
  }

  /* === サイドバー === */
  #hpb-aside {
    order: 2 !important;
    padding: 24px 20px !important;
    background: var(--color-bg) !important;
    border-top: 2px solid #c0b090 !important;
    margin-top: 16px !important;
  }

  #banner { text-align: center !important; }

  #banner p {
    margin-bottom: 16px !important;
    line-height: 1.9 !important;
  }

  #banner p b,
  #banner p font {
    display: block !important;
    font-weight: 400 !important;
    font-size: 15px !important;
    line-height: 1.9 !important;
    color: var(--color-text) !important;
    font-family: var(--font-body) !important;
  }

  #banner a[href="BREAD.html"] {
    display: inline-block !important;
    width: auto !important;
    padding: 12px 32px !important;
    background: transparent !important;
    border: 1px solid var(--color-pink) !important;
    color: var(--color-pink) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    text-align: center !important;
    border-radius: 6px !important;
    margin: 6px 0 20px !important;
    transition: all 0.15s ease !important;
  }

  #banner a[href="BREAD.html"]:active {
    background: var(--color-pink) !important;
    color: white !important;
    transform: scale(0.98) !important;
  }

  #banner .tel {
    font-size: 15px !important;
    color: var(--color-text) !important;
    margin-bottom: 8px !important;
  }

  #banner .tel font { color: inherit !important; }

  #banner iframe {
    display: block !important;
    width: 200px !important;
    height: 200px !important;
    margin: 0 auto 20px !important;
    border-radius: 2px !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1) !important;
  }

  #banner a[href^="mailto"] {
    display: inline-block !important;
    color: var(--color-pink) !important;
    text-decoration: underline dotted var(--color-pink) !important;
    text-decoration-thickness: 1px !important;
    text-underline-offset: 4px !important;
    padding: 8px 4px !important;
    margin: -8px -4px !important;
    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    width: auto !important;
    font-size: 15px !important;
    border-bottom: none !important;
  }

  /* クスパ画像ボタンは非表示（フローティングに統合） */
  #banner a[href*="cookingschool"] img {
    display: none !important;
  }

  /* クスパテキストリンクは表示 */
  #banner font a[href*="cookingschool"] {
    display: inline !important;
    color: var(--color-pink) !important;
  }

  /* === フローティングCTA === */
  .floating-cta {
    display: flex !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 9999 !important;
    background: var(--color-white) !important;
    padding: 12px 20px !important;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.1) !important;
    gap: 12px !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .floating-cta a {
    flex: 1 !important;
    max-width: 170px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 13px 10px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    border-radius: 6px !important;
    text-align: center !important;
    line-height: 1.3 !important;
    transition: transform 0.1s ease, opacity 0.1s ease !important;
  }

  .floating-cta .btn-reserve {
    background: var(--color-pink) !important;
    color: var(--color-white) !important;
  }

  .floating-cta .btn-contact {
    background: var(--color-white) !important;
    color: var(--color-pink) !important;
    border: 1px solid var(--color-pink) !important;
  }

  .floating-cta a:active {
    opacity: 0.85 !important;
    transform: scale(0.97) !important;
  }

  /* === トップへ戻るボタン === */
  .back-to-top {
    display: flex !important;
    position: fixed !important;
    bottom: 75px !important;
    right: 16px !important;
    width: 44px !important;
    height: 44px !important;
    background: var(--color-footer-bg) !important;
    color: var(--color-white) !important;
    border: none !important;
    border-radius: 50% !important;
    font-size: 20px !important;
    cursor: pointer !important;
    z-index: 9998 !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.25) !important;
    transition: opacity 0.3s ease, visibility 0.3s ease !important;
    align-items: center !important;
    justify-content: center !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  .back-to-top.is-visible {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  .back-to-top:active { opacity: 0.8 !important; }

  /* === フッター === */
  #hpb-footer {
    order: 3 !important;
    padding: 10px 20px 10px 20px !important;
    margin-bottom: 60px !important;
    background: var(--color-footer-bg) !important;
  }

  #hpb-footerExtra1 { display: none !important; }

  #hpb-footerMain { text-align: center !important; }

  #hpb-footerMain p {
    font-size: 10px !important;
    color: rgba(255, 255, 255, 0.7) !important;
    letter-spacing: 0.06em !important;
    margin: 0 !important;
    line-height: 1.5 !important;
  }

  /* === ユーティリティ === */
  br {
    display: block !important;
    margin: 0 !important;
    height: auto !important;
  }

  img[src*="spacer"],
  img[width="1"] { display: none !important; }

  #pagetop { display: none !important; }

  img {
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
    margin: 8px auto !important;
  }

  font { font-family: inherit !important; }

  font[color="#FFFFFF"],
  font[color="white"] {
    color: var(--color-text) !important;
    display: inline !important;
    padding: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    font-size: inherit !important;
    line-height: inherit !important;
    margin: 0 !important;
  }

  span {
    font-size: inherit !important;
    background: none !important;
  }

  h1, h2, h3 { word-wrap: break-word !important; }

  strong, b {
    font-size: inherit !important;
    line-height: inherit !important;
    word-wrap: break-word !important;
  }

  .hpb-parts-cnt-01 font {
    word-break: break-word !important;
    overflow-wrap: break-word !important;
  }

  /* === 共通カードデザイン（スマホ） === */
  .lesson-card {
    margin: 0 8px 28px 8px !important;
    padding: 20px 20px !important;
  }

  /* === ギャラリー横スクロール === */
  .image-gallery {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-snap-type: x mandatory !important;
    padding-bottom: 8px !important;
    justify-content: flex-start !important;
  }

  .image-gallery img {
    flex-shrink: 0 !important;
    width: 140px !important;
    height: 140px !important;
    object-fit: cover !important;
    max-width: none !important;
    margin: 0 !important;
    scroll-snap-align: start !important;
  }

  /* === 折りたたみセクション === */
  .collapsible-details {
    margin: 0 8px 28px 8px !important;
    display: block !important;
  }

  .collapsible-details > summary {
    display: block !important;
    padding: 14px 20px !important;
    background: rgba(255, 255, 255, 0.9) !important;
    border-radius: 12px !important;
    font-family: 'AR P教科書体M', serif !important;
    font-size: 1em !important;
    color: rgb(255, 0, 128) !important;
    font-weight: bold !important;
    cursor: pointer !important;
    list-style: none !important;
    box-shadow: 0 4px 10px rgba(184, 134, 11, 0.1) !important;
    text-align: left !important;
  }

  .collapsible-details > summary::-webkit-details-marker {
    display: none !important;
  }

  .collapsible-details > summary::after {
    content: ' ▼' !important;
    font-size: 0.8em !important;
  }

  .collapsible-details[open] > summary {
    border-radius: 12px 12px 0 0 !important;
    margin-bottom: 0 !important;
  }

  .collapsible-details[open] > summary::after {
    content: ' ▲' !important;
  }

  .collapsible-details > .lesson-card:first-of-type {
    border-radius: 0 !important;
    margin-top: 0 !important;
  }

  /* === カード内「続きを読む」 === */
  .read-more {
    display: block !important;
  }

  .read-more > summary {
    display: inline-block !important;
    color: rgb(255, 0, 128) !important;
    cursor: pointer !important;
    font-family: 'AR P教科書体M', serif !important;
    font-size: 0.9em !important;
    list-style: none !important;
    padding: 8px 0 !important;
    margin: 0 !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    width: auto !important;
  }

  .read-more > summary::-webkit-details-marker {
    display: none !important;
  }

  .read-more > summary::after {
    content: ' ▼' !important;
    font-size: 0.8em !important;
  }

  .read-more[open] > summary::after {
    content: ' ▲' !important;
  }
}