/* SPスタイル */
@media (max-width: 1143px) {
  .breadcrumb-container {
    margin: 24px 24px 60px;
  }

  #news-detail .btn.btn--primary.news-navigation__link--list {
    max-width: 188px;
    margin-top: 15px;
  }

  .section__container.mypage__container {
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
  }
}

@media (max-width: 1024px) {

  /* ヘッダー：モバイル対応 */
  .header {
    margin: 0;
    padding: 0;
  }

  .header__top {
    margin: 0;
    border-radius: 0;
    padding: 24px;
    gap: 24px;
    min-height: 180px;
    height: fit-content;
    padding-top: calc(24px + 45px + 40px);
  }

  /* ヘッダーコンテナ（ロゴとハンバーガー） */
  .header__container {
    position: fixed;
    top: 24px;
    left: 24px;
    right: 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6.5px 8px;
    margin: 0;
    background-color: var(--color-beige);
    border-radius: var(--border-radius);
    z-index: 1000;
    box-shadow: 0px 0px 10px 0px #0000001A;
    transition: top 0.25s ease;
  }

  .header__container.scrolled {
    top: 16px;
  }

  .header__logo {
    padding: 4px 0 6px;
  }

  .header__logo-img {
    height: 24px;
  }

  /* ハンバーガーボタン：モバイルで表示 */
  .header__hamburger {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    width: 24px;
    height: 22px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 1001;
    margin: 0;
    position: relative;
    transition: all 0.3s ease;
    flex-shrink: 0;
    padding-right: 2px;
  }

  /* メニューが開いている時、ハンバーガーを右上に配置 */
  body.menu-open .header__hamburger {
    position: fixed;
    top: 24px;
    right: 24px;
    width: 32px;
    height: 32px;
    padding: 5px;
    margin: 0;
  }

  .header__hamburger-line {
    width: 100%;
    height: 3px;
    background-color: var(--color-orange);
    border-radius: 3px;
    transition: all 0.3s ease;
    transform-origin: center;
  }

  /* メニューが開いている時、線を黒色に、2pxに */
  body.menu-open .header__hamburger .header__hamburger-line {
    background-color: #333333;
    height: 2px;
  }

  body.menu-open .header__hamburger .header__hamburger-line:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
  }

  body.menu-open .header__hamburger .header__hamburger-line:nth-child(2) {
    opacity: 0;
    transform: scale(0);
  }

  body.menu-open .header__hamburger .header__hamburger-line:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
  }


  /* ナビゲーション：デフォルトで非表示（ハンバーガーメニュー） */
  .header__nav {
    display: none !important;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    background-color: var(--color-white);
    padding: 24px;
    flex-direction: column;
    gap: 40px;
    z-index: 1000;
    align-items: stretch;
    overflow-y: auto;
    justify-content: flex-start;

  }

  /* ハンバーガーメニューが開いている時 */
  .header__nav.active {
    display: flex !important;
  }

  /* メニューヘッダー（ロゴ） */
  .header__nav-header {
    display: flex;
    align-items: center;
    width: 100%;
    margin-bottom: 8px;
  }

  /* メニュー内のロゴ */
  .header__nav-logo {
    display: flex;
    align-items: center;
    padding: 4px 0;
  }

  .header__nav-logo-img {
    width: auto;
    height: 24px;
    object-fit: contain;
    display: block;
  }

  /* ナビゲーションリンク：白いコンテナ内で縦に並べる */
  .header__nav-links {
    flex-direction: column;
    width: 100%;
    gap: 24px;
    margin-top: 40px;
    align-items: flex-start;
  }

  /* モバイル専用：スラッシュ区切りのリンク */
  .header__nav-links-slash {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 100%;
    gap: 0;
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .header__nav-links-slash li {
    display: flex;
    align-items: center;
  }

  .header__nav-links-slash-item {
    font-size: 14px;
    color: #33333366;
    padding: 0;
    font-weight: var(--font-weight-medium);
    font-family: "Zen Kaku Gothic New", sans-serif;
  }

  .header__nav-links-slash-item:hover {
    color: var(--color-orange);
  }

  .header__nav-links-slash li:not(:last-child)::after {
    content: '/';
    margin: 0 8px;
    color: #33333366;
  }

  /* モバイル専用リンク：表示 */
  .header__nav-links--mobile {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 8px;
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .header__nav-links--mobile li {
    display: flex;
  }

  /* モバイル専用SNS */
  .header__nav-sns {
    display: flex;
    width: 100%;
    gap: 12px;
    align-items: center;
    justify-content: center;
    text-align: center;
    vertical-align: middle;
  }

  .header__nav-sns-list {
    display: flex;
    flex-direction: row;
    gap: 16px;
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .header__nav-sns-item {
    display: flex;
  }

  .header__nav-sns-link {
    display: flex !important;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: var(--color-orange);
    transition: none !important;
  }

  .header__nav-sns-link img {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }


  .header__nav-sns-icon {
    width: 24px;
    height: 24px;
    min-width: 24px;
    min-height: 24px;
    display: block !important;
    flex-shrink: 0;
    object-fit: contain;
  }

  .header__nav-sns-text {
    font-size: 16px;
    font-weight: var(--font-weight-medium);
    line-height: 180%;
    color: var(--color-orange);
    padding-top: 2px;
  }

  .header__link {
    width: 100%;
    justify-content: flex-start;
    padding: 0;
    font-size: 16px;
    color: var(--color-black);
    font-weight: var(--font-weight-medium);
    line-height: 180%;
    letter-spacing: 0.04em;
    border-radius: 4px;
    transition: none !important;
    background-color: transparent !important;
  }

  .header__link:hover {
    color: var(--color-orange) !important;
    background-color: transparent !important;
  }

  .header__link-icon {
    min-width: 32px;
    min-height: 32px;
    transition: none !important;
    transition-property: none !important;
    transition-duration: 0s !important;
    transition-delay: 0s !important;
    transition-timing-function: none !important;
  }

  /* アイコンのfilter変更時のアニメーションを完全に無効化 */
  .header__nav .header__link .header__link-icon,
  .header__nav .header__link:hover .header__link-icon,
  .header__nav .header__link:active .header__link-icon,
  .header__nav .header__link:focus .header__link-icon {
    transition: none !important;
    transition-property: none !important;
    transition-duration: 0s !important;
    transition-delay: 0s !important;
    transition-timing-function: none !important;
    /* hover時もfilterを変更しない */
    filter: brightness(0) saturate(100%) invert(60%) sepia(95%) saturate(2000%) hue-rotate(350deg) brightness(1) contrast(1) !important;
  }

  /* 認証ボタンも縦に */
  .header__nav-auth {
    flex-direction: column;
    width: 100%;
    gap: 8px;
  }

  .header__nav-auth .btn {
    width: 100%;
  }

  /* ページ情報：縦に並べる */
  .header__page-info {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
  }

  /* pageLinksがない場合は非表示 */
  .header__page-nav:empty {
    display: none !important;
  }

  /* header__page-navが空（子要素がない）場合は非表示 */
  .header__page-nav:not(:has(*)) {
    display: none !important;
  }

  .header__title {
    font-size: 32px;
    line-height: 150%;
  }

  .header__title-icon {
    width: 40px;
    height: 40px;
  }

  .header__page-nav {
    flex-direction: column;
    gap: 11px;
    width: 100%;
    padding: 0;
    align-items: flex-start;
  }

  .header__page-nav-link {
    font-size: 16px;
    justify-content: space-between;
    width: 100%;
  }

  .header__page-nav-icon-wrapper {
    width: 24px;
    height: 24px;
  }

  .header__page-nav-icon {
    width: 24px;
    height: 24px;
  }

  .footer__top {
    flex-direction: column;
    gap: 0px;
  }

  .footer__auth .header__logo-img {
    margin-bottom: 32px;
  }

  .footer__auth {
    padding: 24px;
    width: 100%;
    height: fit-content
  }

  .footer__auth .btn--secondary,
  .footer__auth .btn--primary {
    margin-left: 0px;
  }

  .footer__auth .btn--primary {
    margin-bottom: 40px;
  }

  .footer__auth-links {
    justify-content: center;
    gap: 8px;
    padding: 4px;
  }

  .footer__links {
    flex-direction: column;
    padding: 60px 24px;
    gap: 24px;
  }

  .footer__links-list,
  .footer__links-block:nth-child(2) .footer__links-list {
    flex-direction: row;
    padding: 0px;
    gap: 0px;
  }

  .footer__links-block {
    gap: 8px;
  }

  .footer__links-title,
  .footer__links-list--no-title li a,
  .footer__links-title-link a {
    gap: 4px;
  }

  /* リンクの間にスラッシュを追加（no-titleリストを除く） */
  .footer__links-list:not(.footer__links-list--no-title) li:not(:last-child)::after {
    content: '/';
    margin: 0 8px;
    color: #FFFFFFCC;
  }

  .footer__links-list--no-title {
    flex-direction: column;
  }

  .footer__links-list--no-title {
    gap: 8px;
  }

  /* フッターボトム：モバイル対応 */
  .footer__bottom {
    flex-direction: column;
    padding: 37px;
  }

  .footer__bottom-links-list {
    flex-direction: column;
    gap: 8px;
  }

  .footer__copyright {
    font-size: 12px;
    line-height: 1.5;
  }

  .footer__copyright-br {
    display: block;
  }

  /* パンくずリスト */
  .breadcrumb-container {
    margin: 24px 24px 60px;

  }

  .c-breadcrumb__item a {
    color: #9C846566;
  }

  .c-breadcrumb__item:not(:last-child)::after {
    background-color: #9C846566;
    color: #9C846566;
    mask-image: url('/img/bread-arrow.svg');
    -webkit-mask-image: url('/img/black-bread-arrow.svg');

  }
}

@media (max-width: 768px) {

  /* ボタン：モバイル対応 */
  .btn {
    width: 100%;
    justify-content: space-between;
  }

  /* 小さいボタン：padding 12px 16px */
  .btn--small {
    padding: 12px 16px;
  }

  /* デフォルト/中サイズボタン：padding 12px 16px */
  .btn,
  .btn--default {
    padding: 12px 16px;
  }

  .btn--ghost {
    padding: 0;
  }

  /* 大きいボタン：padding 16px 20px */
  .btn--large {
    padding: 16px 20px;
  }

  h2 {
    font-size: 24px;
    padding-bottom: 9px;
    background-size: 16px 8px;
  }

  h3 {
    font-size: 20px;
  }

  input {
    padding: 13px 24px;
  }

  .section__container {
    margin: 0 auto;
    box-sizing: border-box;
  }

  .section--transparent {
    padding-bottom: 60px;
    padding-left: 24px;
    padding-right: 24px;
  }

  .section.section--transparent.section--stand-alone {
    padding-bottom: 100px;
  }

  .section--white-wide {
    padding: 60px 24px;

  }

  /* 波の装飾（モバイル版 - 浅め） */
  .section--wave::before {
    height: 16px;
  }

  .section--wave::after {
    height: 16px;
  }

  .section--padding-top {
    padding-top: 60px;
  }

  .section--transparent-wide {
    padding-top: 60px;
    padding-bottom: 60px;
  }

  .section.section--single {
    padding-top: 60px;
    padding-bottom: 60px;
    margin-bottom: 100px;
    margin-top: 0px;
    gap: 40px;
  }

  .fv {
    padding: 80px 5% 60px;
  }

  .fv__inner {
    flex-direction: column-reverse;
  }

  .fv__slider {
    width: 100%;
  }

  .fv__title {
    text-align: left;
    width: 100%;
  }

  .fv__text-content {
    width: 100%;
  }

  .fv__slider-nav {
    position: relative;
  }

  .upcoming-courses {
    max-width: calc(100% - 5%);
    flex-direction: column;
    gap: 16px;
    margin-left: 5%;
  }

  .upcoming-courses__list {
    padding-right: 5%;
    margin-bottom: 60px;
  }

  .upcoming-courses__list-item {
    min-width: 245px;
    padding: 8px;
    flex-direction: column;
  }

  .upcoming-courses__list-item-image {
    width: 100%;
  }

  .upcoming-courses__list-item-content {
    gap: 8px;
  }

  .upcoming-courses__list-item-title {
    font-size: 14px;
  }

  .upcoming-courses__list-item-meta {
    font-size: 12px;
  }

  .reservation-results.reservation-results {
    margin-bottom: 100px;
    padding-top: 60px;
    padding-bottom: 60px;
  }

  .wide-section__container.reservation-results__container {
    gap: 50px;
  }

  /* パギネーション：モバイル対応 */
  .pagination__pages .pagination__page:nth-child(4),
  .pagination__pages .pagination__page:nth-child(5) {
    display: none;
  }

  /* DIY教室とはページ */
  .about-section__content {
    gap: 40px;
  }

  .about-section__content-item {
    flex-direction: column;
  }

  .about-section__text {
    width: 100%;
    padding: 0;
    margin-bottom: 24px;
    gap: 16px;
  }

  .about-section__image {
    width: 100%;
    aspect-ratio: 342 / 192;
    object-fit: cover;
    height: 192px;
  }

  .about-section__content-item--alt {
    flex-direction: column-reverse;
  }

  .about-section__details {
    flex-direction: column;
    gap: 16px;
  }

  #popular .section__container {
    flex-direction: column;
    gap: 40px;
    width: fit-content;
    margin: 0 auto;
  }

  .popular-section__title {
    margin: 0 auto;
  }

  #popular .section__item {
    flex-direction: column;
    overflow: hidden;
    gap: 0;
  }

  #popular .section__item-text {
    padding: 24px;
  }

  .section__item-image {
    width: 100% !important;
    max-width: 100% !important;
    aspect-ratio: 342 / 192;
    object-fit: cover;
    flex-shrink: 0;
    transform: scale(1.03);
    transform-origin: center center;
  }

  h2#our-customers {
    text-align: center;
    margin: 0 auto;
  }

  /* お客様の声：モバイルで1列に */
  .customer-card-list {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .customer-card-list__item-text {
    margin-left: auto;
    margin-right: auto;
    margin-top: -80px;
    min-width: calc(100% - 11px);
  }

  .customer-card-list__item-text--alt {
    padding: 24px 21px 24px 22px;
    max-width: 100%;
  }

  .customer-card-list__item-image {
    width: 100%;
    margin-left: 0;
  }

  .reserve-step {
    flex-direction: column;
    padding: 32px 24px 16px;
    gap: 3px;
  }

  .reserve-flow__container {
    margin: 0 auto;
    padding-left: 0px;
  }


  .reserve-step__number {
    position: inherit;
    top: inherit;
    transform: translateY(0);
    left: inherit;
    margin: 0 auto;
    margin-top: -64px;
    width: 59px;
    height: 59px;
    font-size: 24px;
  }

  .reserve-step__body {
    margin: 0;
    text-align: center;
    align-items: center;
  }

  .wide-section__container--how-to-reserve {
    gap: 69px;
  }

  .reserve-step-separator {
    margin-bottom: 30px;
    height: 26px;
    min-height: 26px;
  }

  .reserve-step__body-description {
    text-align: start;
  }

  .btn--reserve-step {
    justify-content: center;
  }

  .section-separator {
    height: 100px;
  }

  /* ログインページ */
  .section--login.section--transparent {
    padding: 0 0 100px;
  }

  .section__container--white {
    padding: 60px 24px;
  }

  .login-form__links p {
    font-size: 14px;
  }

  .btn--login {
    padding: 16px 32px 16px 40px;
  }

  .login-form__input-fields,
  .registration-form__input-fields {
    max-width: 100%;
    min-width: 100%;
  }

  .registration-form__links p,
  .login-form__links p {
    font-size: 14px;
  }

  .login-form__checkbox-label {
    font-size: 14px;
  }

  .login-form__field-row {
    flex-direction: column;
  }

  /* お知らせ一覧ページ */
  .panel.panel--beige.news-card {
    padding: 16px;
    flex-direction: column;
    gap: 8px;
    align-items: start;
  }

  .news-card__date {
    font-size: 14px;
    color: #9C846580;
  }

  .news-detail__title {
    font-size: 24px;
  }

  .news-detail__text {
    font-size: 14px;
  }

  .news-detail__body {
    gap: 24px;
  }

  /* 記事ナビゲーション：モバイル対応 */
  .news-navigation {
    flex-wrap: wrap;
    gap: 40px;
    margin-top: 40px;
  }

  #diyer-detail .news-navigation {
    gap: 16px;
  }

  .news-navigation__link--prev {
    order: 0;
    flex: 1 1 auto;
    min-width: 0;
    max-width: calc(50% - 8px);
    justify-content: flex-start;
  }

  .news-navigation__link--next {
    order: 1;
    flex: 1 1 auto;
    min-width: 0;
    max-width: calc(50% - 8px);
    justify-content: flex-end;
  }

  .news-navigation__link--list {
    order: 2;
    flex: 0 0 100%;
    width: 100%;
    justify-content: center;
  }

  .news-navigation .btn.btn--primary.news-navigation__link--list {
    max-width: 188px;
    margin: 0px auto;
    width: fit-content;
    padding-right: 34px;
    padding-left: 40px;
    padding-top: 16px;
    padding-bottom: 16px;
    margin-top: 15px;
  }

  #diyer-detail .news-navigation .btn.btn--primary.news-navigation__link--list {
    width: 100%;
    max-width: 100%;
    justify-content: space-between;
    padding: 12px 12px 12px 16px;
  }

  /* フォームエラー：モバイル対応 */
  .form-error-banner {
    padding: 8px 16px;
  }

  .form-error-banner__text {
    font-size: 14px;
  }

  /* 規約ページのスタイル */

  .terms ul>li,
  .terms ol>li,
  .terms__article p {
    font-size: 14px;
  }

  .terms {
    gap: 32px;
  }

  /* FAQページのスタイル */
  .faq__question .flex {
    align-items: start;
  }

  .faq__icon-letter {
    margin-top: -3px;
  }

  .faq__icon {
    width: 24px;
    height: 24px;
  }

  .faq__content .btn--primary {
    padding-top: 16px;
    padding-bottom: 16px;
  }

  /* みんなの作品一覧ページのスタイル */
  .work-card__image {
    width: 100%;
    max-width: 100%;
  }

  .work-card {
    min-width: 100%;
    max-width: 100%;
  }

  .work-card__shop {
    top: -1px;
    left: -1px;
  }

  .wide-section__container.gallery-search {
    gap: 24px;
  }

  /* モバイルで最初の8枚のカードのみ表示（Bladeでは不要かもしれません） */
  .gallery-search__grid .work-card:nth-child(n+9),
  .diyer-search__grid .diyer-card:nth-child(n+9) {
    display: none;
  }

  /* みんなの作品詳細ページスタイル */
  #gallery-shop-detail .btn.btn--primary {
    padding-left: 24px;
    padding-top: 16px;
    padding-bottom: 16px;
    line-height: 180%;
  }

  .work-detail__image,
  .work-detail__shop-image {
    max-width: 100%;
  }

  .work-detail__overview-body,
  .work-detail__shop-body {
    flex-direction: column;
  }

  .work-detail__overview-body,
  .work-detail__content-inner {
    gap: 8px;
  }

  .work-detail__overview {
    padding: 24px;
  }

  .work-detail__shop {
    padding: 40px 24px;
    margin: 0;

  }

  .work-detail__overview-content {
    gap: 24px;
  }

  .work-detail__description,
  .work-detail__date,
  .work-detail__author {
    font-size: 14px;
    font-weight: var(--font-weight-regular);
  }

  .work-detail__shop-content {
    margin: 0;
  }

  .diyer-search__inner-menu {
    max-width: 100%;
    min-width: 100%;
  }

  .diyer-search__inner-menu .btn--primary.btn {
    width: fit-content;
    max-width: 100%;
    min-width: fit-content;
  }

  .diyer-search__results {
    flex-direction: column;
  }

  .diyer-card,
  .diyer-card__image {
    max-width: 100%;
    width: 100%;
  }

  .diyer-card__image,
  .diyer-card {
    width: 100%;
    max-width: 100%;
  }

  .work-card__shop {
    top: -1px;
    left: -1px;
  }


  .news-detail__author-image {
    border: 1px solid var(--color-black);
  }

  #diyer-detail .news-detail__body {
    gap: 40px;
  }

  .diyer-search__inner-menu .btn--primary.btn,
  .news-detail__tag-wrapper .btn--primary {
    padding: 4px 16px;
  }

  .news-detail__body p {
    font-size: 14px;
  }

  .news-detail__body img {
    max-width: 100%;
    width: 100%;
  }


  .reservation-success__message,
  .reservation-success__booking,
  .reservation-success__place {
    padding: 24px;
  }

  .reservation-success__booking,
  .place-card__image-wrap {
    max-width: 100%;
  }

  .reservation-success__place {
    gap: 24px;
  }

  .reservation-success__message p {
    font-size: 14px;
    font-weight: var(--font-weight-medium);
  }

  .place-card__address,
  .place-card__row dl,
  .place-card__row dt,
  .place-card__row dd,
  .place-card__row span {
    font-size: 14px;
  }

  .reservation-success__content {
    margin-top: 0;
    gap: 40px;
    flex-direction: column;
  }

  .booking-summary__title {
    margin-top: 0;
  }

  .place-card__top {
    flex-direction: column;
  }

  .place-card__title {
    margin-bottom: 0;
  }

  .place-card__image-wrap {
    border-radius: var(--border-radius);
  }

  #reservation-success.reservation-success {
    padding-bottom: 100px;
  }

  .reservation-detail__content-flex,
  .summary-card__list,
  .booking-form__fields-wrapper {
    flex-direction: column;
  }

  .summary-card__list {
    align-items: start;
  }

  .summary-card__title {
    width: 100%;
  }

  .summary-card__column {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: start;
  }

  .summary-card__column:nth-child(2) {
    margin-left: auto;
    flex-direction: column;
    text-align: start;
    align-self: flex-start;
  }

  .summary-card__cancel-count,
  .summary-card__cancel-count-slash,
  .summary-card__cancel-count-number {
    color: #9C846580;
  }

  .content-flex__main {
    width: 100%;
    max-width: 100%;
    padding: 24px;
  }

  .reservation-detail__content-flex {
    gap: 40px;
  }

  .content-flex__aside.booking-form {
    padding: 40px 16px;
  }

  .booking-form__check {
    gap: 16px;
  }

  .content-flex__aside.booking-form .place-card__bottom .place-card__notes-list .place-card__notes-item {
    font-size: 14px;
  }

  /* セレクトのドロップダウンメニューの位置とフォントサイズを修正 */
  select,
  select.booking-form__input {
    position: relative;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    font-size: 16px !important;
    /* iOSでズームを防ぐため16px以上 */
    min-height: 44px;
    /* タッチターゲットの最小サイズ */
    padding: 12px 36px 12px 12px;
    line-height: 1.5;
    /* ポジショニングの問題を防ぐ */
    transform: none !important;
    will-change: auto;
    backface-visibility: visible;
  }

  .booking-form__input {
    max-width: 100%
  }

  .reservation-info__container {
    flex-direction: column;
    gap: 24px;
  }

  #reservation-info-container .section__container {
    gap: 24px;
  }

  #reservation-info-container .section__container {
    flex-direction: column;
    gap: 24px;
  }

  #reservation-info-container.section__container {
    flex-direction: column;
    gap: 24px;
  }

  .reservation-info__images,
  .reservation-info__images-secondary {
    gap: 16px;
  }

  .reservation-info__images-secondary .reservation-info__image {
    max-width: calc(50% - 6px);
  }

  .reservation-info__container .content-flex__main.course-card {
    padding: 24px;
    gap: 24px;
  }

  #reservation-info-content .flex.gap-24 {
    flex-direction: column;
  }

  #reservation-info-content .course-card__title {
    font-size: 24px;
  }

  #reservation-info-container .reservation-info__content .place-card__bottom .place-card__notes-list .place-card__notes-item {
    font-size: 14px;
  }

  #reservation-info-content .course-card {
    display: flex;
    flex-direction: column;
  }

  #reservation-info-content .course-card__bottom {
    order: -1;
  }

  .course-card__instructor-image-wrap {
    flex-shrink: 1;
    min-width: 60px;
    width: 79px;
    height: 79px;
    max-width: 79px;
    max-height: 79px;
    border-radius: 4px;
  }

  .course-card__instructor {
    gap: 16px;
  }

  .course-card__instructor-info {
    flex-shrink: 1;
    min-width: 0;
  }

  .course-card__instructor-name {
    font-size: 16px;
  }

  .course-card__instructor-description {
    font-size: 14px;
  }

  .reservation-info__container .content-flex__main.course-card,
  .reservation-info__images,
  .reservation-info__content {
    max-width: 100%;
  }

  /* マイページスタイル */
  .mypage__layout {
    flex-direction: column;
  }

  .mypage__sidebar {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    gap: 24px;
    align-items: center;
    padding: 40px 24px;
  }

  .sidebar__content {
    display: contents;
  }

  .sidebar__profile {
    grid-column: 1;
    grid-row: 1;
    text-align: left;
    margin: 0;
  }

  .sidebar__footer {
    grid-column: 2;
    grid-row: 1;
    margin: 0;
  }

  .sidebar__logout {
    margin: 0;
  }

  .sidebar__nav {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .sidebar__list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .sidebar__item {
    margin: 0;
  }

  .sidebar__link {
    box-sizing: border-box;
    border-radius: 4px;
    padding: 10px 8px;
    background-color: var(--color-white);
    text-align: center;
    line-height: 180%;
  }

  .sidebar__link--active {
    color: var(--color-white);
    background-color: var(--color-orange);
  }

  .mypage__main {
    padding: 40px 24px 60px;
  }

  .account__title {
    text-align: center;
    margin: auto;
  }

  .account__cards {
    flex-direction: column;
    gap: 24px;
  }

  .card__action.btn {
    width: fit-content;
    padding: 12px 11px 12px 25px;
    font-size: 14px;
    width: 130px;
  }

  .withdraw__button.btn {
    font-weight: var(--font-weight-regular);
    padding: 0;
    width: fit-content;
  }

  .withdraw__button.btn:hover {
    background-color: transparent;
  }

  /* Modal スタイル（モバイル） */
  .modal__content {
    padding: 32px 24px;
    max-width: 90%;
  }

  .modal__title {
    font-size: 20px;
  }

  .modal__text {
    font-size: 14px;
  }

  .modal__actions {
    flex-direction: column;
  }

  .modal__button {
    width: 100%;
    min-width: auto;
    justify-content: center;
  }

  .modal__button--confirm {
    order: -1;
  }

  .modal__button--cancel {
    order: 1;
  }

  /* 退会完了モーダル（ボタンが1つだけの場合） */
  #withdraw-complete-modal .modal__actions {
    justify-content: center;
  }

  /* 予約中の講座ページ - モバイルではスクロールなし */
  .reservations {
    max-height: none;
    overflow-y: visible;
    overflow-x: visible;
  }

  .reservation-card,
  .reservation-card__body,
  .reservation-card__content,
  .reservation-card__summary,
  .reservation-card__meta {
    flex-direction: column;
  }

  .reservation-card__media {
    width: 100%;
  }

  .reservation-card__slider-images-wrapper {
    height: 196px;
  }

  .reservation-card__body,
  .reservation-card {
    gap: 16px;
  }

  .reservation-card__summary {
    gap: 8px;
  }

  .reservation-card__time {
    padding-left: 4px;
  }

  .reservation-card__meta {
    gap: 4px;
  }

  .reservation-card__summary-item {
    width: 100%;
    justify-content: space-between;
  }

  .reservation-card__actions .btn--white.btn {
    text-align: center;
    justify-content: center;
    width: 100%;
    max-width: 100%;
  }

  .reservation-card__title {
    margin-top: 8px;
    margin-bottom: 16px;
  }

  .reservation-details {
    padding: 24px;
  }

  #mypage-reservation-info .course-card__bottom {
    order: 0 !important;
  }

  .course-card__description {
    font-size: 14px;
  }

  .waitlist-card__actions {
    flex-direction: column;
  }

  .btn.btn--primary.waitlist-card__button {
    padding: 8px 16px;
    justify-content: center;

  }

  /* 検索ページ */
  .reservation-search__form {
    padding: 40px 24px;
  }

  .reservation-search__select-wrapper {
    flex-direction: column;

  }

  .reservation-search__row.reservation-search__row--filters {
    flex-direction: column;
    gap: 16px;
  }

  #reservation-search .reservation-search__select {
    width: 100%;
    max-width: 100%;
    border-radius: 4px 4px 0 0 !important;
  }

  #reservation-search .reservation-search__select--alt {
    border-radius: 0 0 4px 4px !important;
  }

  #reservation-search.section--transparent {
    padding-left: 0;
    padding-right: 0;
  }

  .reservation-search__row.reservation-search__row--recommend {
    flex-direction: column;
    gap: 8px;
  }

  .reservation-search__recommend-label {
    font-size: 14px;
    line-height: 150%;
    margin-top: 8px;
    word-break: keep-all;
    flex-wrap: wrap;
  }

  .reservation-search__recommend-list {
    flex-wrap: wrap !important;
  }

  .reservation-search__recommend-item {
    flex-shrink: 0;
  }

  .reservation-search__recommend-list {
    margin-left: 24px;
  }

  .reservation-search__recommend-link {
    font-size: 14px;
    line-height: 150%;
    white-space: nowrap;
  }

  .reservation-search__date-separator {
    padding-right: 0;
  }

  .reservation-results__prefecture-title::after {

    margin-left: 12px;
  }

  .reservation-results__prefecture {
    gap: 24px;
  }

  .reservation-results__area-title,
  .reservation-results__prefecture-title {
    font-size: 20px;
  }

  .shop-card__info-row {
    flex-direction: column;
    gap: 16px;
    justify-content: start;
    align-items: start;
  }


  /* カレンダーの入力フィールドをモバイルで固定サイズに */
  .dads-date-picker__controls {
    flex-wrap: nowrap !important;
    gap: 2px !important;
    column-gap: 2px !important;
    width: 100% !important;
    display: flex !important;
    align-items: end !important;
  }

  .dads-date-picker__inputs {
    gap: 2px !important;
    flex-shrink: 0 !important;
  }

  .dads-date-picker__year,
  .dads-date-picker__month,
  .dads-date-picker__day {
    flex-shrink: 0 !important;
    width: auto !important;
    margin: 0 !important;
    margin-left: 0 !important;
    padding: 0 !important;
  }

  .dads-date-picker__input {
    width: 77px !important;
    height: 50px !important;
    text-align: left !important;
    padding-left: 8px !important;
  }

  .dads-date-picker__year .dads-date-picker__input,
  .dads-date-picker__month .dads-date-picker__input,
  .dads-date-picker__day .dads-date-picker__input {
    width: 77px !important;
    height: 50px !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  .dads-date-picker__input::placeholder {
    text-align: right !important;
    padding-right: 8px;
  }

  .btn.reservation-search__submit {
    width: fit-content;
    padding: 16px 16px 16px 24px;
    min-height: 56px;
  }

  /* 月と日の負のマージンを削除 */
  .dads-date-picker__month:not(:first-child),
  .dads-date-picker__day:not(:first-child) {
    margin-left: 0 !important;
  }

  .dads-date-picker__month:last-child,
  .dads-date-picker__day:last-child {
    padding-right: 0 !important;
  }


  .dads-date-picker__calendar-button {
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
    width: 64px !important;
    min-width: 64px !important;
    max-width: 64px !important;
  }

  #reservation-search .dads-date-picker__month .dads-date-picker__input,
  #reservation-search .dads-date-picker__day .dads-date-picker__input {
    width: 77px !important;
  }

  .reservation-results__area {
    gap: 32px;
  }

  .choice-section__content {
    flex-direction: column;
  }

  .choice-section__item {
    padding: 24px;
  }

  .choice-section__item-content {
    flex-direction: row;
    gap: 16px;
  }

  .choice-section__item-icon {
    width: 40px;
    height: 40px;
  }

  .choice-section__item-title {
    font-size: 20px;
  }

  .section-area {
    display: none !important;
  }

  .top-popular__button {
    position: static;
    top: inherit;
    left: inherit;
    margin: 0 auto;
    margin-top: 52px;
  }

  .auto-slider {
    display: none !important;
  }

  .section--transparent-wide.top-slider-section {
    padding: 0;
    height: 40px;
  }

  .dier-section {
    margin-top: 80px;
  }

  .section--transparent.construction {
    padding: 0;
    margin-bottom: 80px;
  }

  .construction__layout {
    flex-direction: column;
  }

  .construction__media {
    width: 100%;
    max-width: 100%;
    height: auto;
  }

  .construction__image {
    width: 100%;
    height: auto;
    max-width: 100%;
    border-radius: 8px 8px 0 0;
    aspect-ratio: 390 / 228;
  }

  .construction__content {
    width: 100%;
    max-width: 100%;
    border-radius: 0 0 8px 8px;
  }

  .construction__subtitle {
    padding-left: 71px;
    padding-right: 71px;
    font-size: 14px;
  }

  .construction__content {
    padding: 40px 24px;
    gap: 24px;
  }

  .construction__content p, .construction__item {
    font-size: 14px;
  }

  .construction__item {
    padding-top: 2px;
  }

  .btn.btn--primary.construction__button {
    margin-top: 16px;
  }


  .section.banner-section {
    margin-top: 80px;
  }

  .banner-section__wrapper {
    grid-template-columns: repeat(1, 1fr);
  }

  .section--transparent.banner-section {
    margin-top: 60px;

    .section--transparent.banner-section {
      padding-bottom: 100px;
    }
    .shop-info__alert {
    padding: 8px;
  }

  .wide-section__container.shop-info__container {
    padding-top: 60px;
    padding-bottom: 0px;
  }

  .section--white-wide.shop-info {
    padding-bottom: 60px;
    margin-bottom: 80px;
  }

  .shop-info__content {
    flex-direction: column;
    gap: 40px;
  }

  .shop-info__container {
    gap: 40px;
  }

  .shop-info__details-inner {
    gap: 8px;
  }

  .shop-info__name {
    margin-bottom: 16px;
  }

  .shop-info__actions .btn {
    padding: 12px 16px;
  }

  .tabs-section {
    padding-top: 0;
    padding-bottom: 0;
  }

  .tabs__button {
    padding: 5px 24px;
    font-size: 16px;
    line-height: 180%;
  }

  .class-list__header {
    flex-direction: column;
    gap: 16px;
  }

  .btn--primary.class-list__button {
    justify-content: start;
  }

  .class-list__header .gallery-search__input {
    flex: 1;
    min-height: 64px;
    min-width: 100%;
    width: 100%;
    max-width: 100%;
  }

  #class-list .gallery-search__header {
    margin: 0;
    width: 100%;
  }

  .workshop-card__header {
    flex-direction: column;
  }

  .workshop-card {
    flex-direction: column;
    gap: 24px;
    padding: 0 0 24px;
  }

  .workshop-card__tag {
    margin: 0;
    width: 100%;
    max-width: 100%;
    font-size: 16px;
    line-height: 180%;
    text-align: center;
    padding: 4px;
  }

  .workshop-card__title {
    margin: 0 auto;
    width: 100%;
    max-width: 100%;
    text-align: center;
    padding: 8px;
    font-size: 18px;
    justify-content: center;
  }

  .workshop-card__main {
    flex-direction: column;
    padding: 0 24px;
    gap: 24px;
  }

  .workshop-card__slider-images-wrapper {
    width: 100%;
    max-width: 100%;
  }

  .workshop-card__text p {
    font-size: 14px;
  }

  .workshop-card__summary-list {
    padding: 24px 0 0;
    border-left: none;
    border-top: 1px solid var(--color-border);
  }

  .workshop-card__summary-item--alt .course-card__materials-title {
    margin-top: 8px;
  }

  .workshop-card__availability {
    margin: 0 24px;
    padding: 24px 16px;
  }

  .workshop-card__availability-list {
    flex-wrap: wrap;
    gap: 8px;
  }

  .workshop-card__availability-item {
    flex: 0 1 calc(50% - 8.5px);
    min-width: 0;
  }

  .workshop-slot__time {

    flex-direction: column;
  }

  .workshop-slot__date {
    font-size: 16px;
  }

  .workshop-slot {
    gap: 4px;
  }

  .btn.workshop-card__availability-btn {
    width: fit-content;

  }

  .workshop-card__label {
    padding: 0;
  }

  .workshop-card__size {
    width: 100%;
    text-align: center;
    margin-top: 0px;
  }

  .workshop-card__description {
    gap: 24px;
  }
.btn--primary.our-works__button {
  width: calc(100% - 48px);

}
  .modal__content--calendar {
    padding: 50px 16px 16px 16px;
  }
  .calendar-modal__header {
    margin-bottom: 16px;
  }
  
  .calendar-modal__table tbody td {
    min-height: 122px;
  }
  
  .calendar-modal__nav-btn {
    width: 24px;
    height: 24px;
  }
  
  .calendar-modal__nav-btn svg {
    width: 20px;
    height: 20px;
  }
  .modal__content--calendar {
    height: auto;
    overflow: scroll;
    border-radius: 4px;
  }
  .calendar-modal__event {
    font-size: 12px;
  }
  .calendar-modal__table tbody td {
    font-size: 12px;
  }
  .calendar-modal__month {
    font-size: 20px;
  }
}

  @media screen and (min-width: 768px) and (max-width: 1024px) {
    .news-detail__body img {
      max-width: 400px !important;
    }

    .diyer-card__image,
    .diyer-card {
      width: 100%;
      max-width: 100%;
    }

    .work-card__shop {
      top: -1px;
      left: -1px;
    }
  }

  @media (min-width: 660px) and (max-width: 768px) {
    .customer-card-list {
      grid-template-columns: repeat(2, 1fr);
    }

    .reservation-search__select-wrapper {
      flex-direction: column;
    }
  }

  @media (min-width: 660px) and (max-width: 860px) {
    .customer-card-list {
      grid-template-columns: repeat(2, 1fr);
    }

    .reservation-search__select-wrapper {
      flex-direction: column;
    }

    .area-section__container {
      flex-direction: column;
      gap: 40px;
    }

  }

  @media (max-width: 670px) {
      .reservation-results__item {
        width: 100%;
        max-width: 100%;
        flex: 1;
      }
}

/* 02-02-01: 季節限定固定バナー（SP用） */
@media (max-width: 1024px) {
  .seasonal-banner__poster-wrapper {
    display: block;
    padding: 10px 8px;
    border-radius: 8px;
    width: 105px;
    height: 148px;
    box-sizing: border-box;
    overflow: hidden;
  }
  
  .seasonal-banner__slider {
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
  }
  
  .seasonal-banner__slider-track .seasonal-banner__poster {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    min-width: 0;
    min-height: 0;
  }
  
  .seasonal-banner__label {
    display: none;
  }
  
  .seasonal-banner__content {
    display: none !important;
  }
  
  .seasonal-banner-modal__slider-wrapper {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
  }
  
  .seasonal-banner-modal__slider {
    flex: 1;
    overflow: hidden;
    position: relative;
    border-radius: 4px;
  }
  
  .seasonal-banner-modal__slider-track {
    display: flex;
    transition: transform 0.5s ease;
    width: 100%;
  }
  
  .seasonal-banner-modal__poster {
    flex-shrink: 0;
    width: 100%;
    min-width: 100%;
    max-width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
    border-radius: 4px;
  }
  
  .seasonal-banner-modal__nav-btn {
    width: 32px;
    height: 32px;
    background-color: var(--color-orange);
    border: none;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    padding: 0;
  }
  
  .seasonal-banner-modal__nav-btn--prev,
  .seasonal-banner-modal__nav-btn--next {
    display: flex !important;
  }
  
  .seasonal-banner-modal__nav-btn svg {
    width: 24px;
    height: 24px;
    color: var(--color-white);
  }
  
  .modal__content--seasonal-banner {
    padding: 40px 16px 24px;
    max-width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    background-color: var(--color-beige);
  }
  
  .seasonal-banner-modal__close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 32px;
    height: 32px;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-orange);
    padding: 0;
    z-index: 10;
  }
  
  .seasonal-banner-modal__text {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 0 8px;
  }
  
  .seasonal-banner-modal__label {
    font-size: 14px;
    font-weight: var(--font-weight-bold);
    line-height: 150%;
    color: var(--color-black);
  }
  
  .seasonal-banner-modal__text p {
    font-size: 14px;
    line-height: 180%;
    color: var(--color-black);
  }
  
  .seasonal-banner-modal__button {
    width: 100%;
    margin: 0px;
    max-height: 48px;
  }
  }

  @media (max-width: 900px) {

    .area-section__container {
      flex-direction: column;
      gap: 40px;
      justify-content: end;

    }

  }
}