@media (max-width: 768px) {

  /* =========================================================
     共通：1200px固定を解除
     ========================================================= */
  html,
  body {
    min-width: 0 !important;
    width: 100%;
    max-width: 100%;
  }

  body {
    overflow-x: hidden;
  }

  img {
    max-width: 100%;
    height: auto;
  }

  p,
  h1,
  h2,
  h3,
  td,
  th,
  a,
  span {
   overflow-wrap: anywhere;
  }

  .gold-btn,
  .outline-btn {
    max-width: 100%;
    white-space: normal !important;
  }

  /* =========================================================
     共通ヘッダー
     ========================================================= */
  .site-header {
    min-width: 0 !important;
    width: 100%;
    height: auto;
  }

  .header-inner {
    width: 100% !important;
    height: auto;
    min-height: 70px;
    padding: 10px 16px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
  }

  .logo img {
    height: 38px;
    width: auto;
    margin-left: 0;
  }

  .language-switch {
    margin-left: auto;
    gap: 5px;
    font-size: 11px;
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  .language-switch a {
    padding: 5px 7px;
  }

  .global-nav {
    width: 100%;
    order: 3;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 12px;
    font-size: 13px;
    padding: 8px 0 4px;
    text-align: center;
  }

  .global-nav > a,
  .global-nav .dropdown > a {
    display: block;
    padding: 8px 4px;
  }

  .dropdown-menu {
    max-width: calc(100vw - 32px);
  }

  /* =========================================================
     共通：下層ページのメインビジュアル
     ========================================================= */
  .page-hero {
    min-width: 0 !important;
    width: 100%;
    min-height: 360px;
    background-position: center;
  }

  .breadcrumb {
    width: 100% !important;
    padding: 15px 18px 0;
  }

  .page-hero-copy {
    width: 100% !important;
    padding: 42px 20px 48px;
  }

  .page-hero h1,
  .page-hero-copy h1 {
    font-size: clamp(30px, 9vw, 40px);
    letter-spacing: .08em;
    line-height: 1.35;
    margin-bottom: 18px;
  }

  .page-hero-copy p:last-child,
  .page-hero-copy p {
    font-size: 15px;
    line-height: 1.8;
    letter-spacing: .03em;
  }

  .page-hero-copy p br {
    display: none;
  }

  .section {
    padding: 38px 18px;
  }

  .center-title {
    font-size: 21px;
    gap: 10px;
    margin-bottom: 28px;
    letter-spacing: .06em;
  }

  .center-title span {
    width: 22px;
    flex: 0 0 22px;
  }

  /* =========================================================
     共通：フッター
     ========================================================= */
  .footer {
    min-width: 0 !important;
    width: 100%;
  }

  .footer-inner {
    width: 100% !important;
    padding: 0 18px;
    grid-template-columns: 1fr !important;
    text-align: center;
    gap: 20px;
  }

  .footer-logo {
    margin: 0 auto;
  }

  .footer nav {
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px 20px;
  }

  /* =========================================================
     COMPANY
     ========================================================= */
  .hero-map {
    width: 160px;
    right: 10px;
    top: 175px;
    opacity: .35;
  }

  .number-grid {
    width: 100% !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .number-card {
    padding: 24px 10px;
    border-bottom: 1px solid #ddd4c5;
  }

  .number-card strong {
    font-size: 40px;
  }

  .number-card h3 {
    font-size: 15px;
  }

  .number-card p {
    font-size: 12px;
  }

  .story-grid {
    width: 100% !important;
    grid-template-columns: 1fr !important;
    gap: 24px;
  }

  .story-text h2 {
    white-space: normal !important;
    font-size: 24px;
  }

  .story-image img,
  .story-image.large img {
    width: 100%;
    height: 230px;
  }

  .commitment-grid {
    width: 100% !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .commitment-card {
    padding: 24px 12px;
  }

  .gallery-grid {
    width: 100% !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .gallery img {
    height: 140px;
  }

  .company-info {
    width: 100% !important;
    grid-template-columns: 1fr !important;
    gap: 24px;
  }

  .company-info-title h2 {
    font-size: 26px;
  }

  .company-table {
    width: 100%;
    overflow-x: auto;
  }

  .company-table table {
    width: 100%;
    table-layout: fixed;
    font-size: 12px;
  }

  .company-table th,
  .company-table td {
    padding: 9px;
    word-break: break-word;
  }

  .company-table th {
    width: 92px;
  }

  .company-photo img {
    height: 220px;
  }

  /* =========================================================
     共通CTA（company / history / vietnam-history）
     ========================================================= */
  .cta {
    min-width: 0 !important;
    width: 100%;
    padding: 35px 18px;
  }

  .cta-inner {
    width: 100% !important;
    padding: 25px 18px;
    grid-template-columns: 1fr !important;
    gap: 20px;
    text-align: center;
  }

  .cta h2 {
    font-size: 20px;
  }

  .cta img {
    max-height: 140px;
    margin: 0 auto;
  }

  /* =========================================================
     FRAME / LENS / SUNGLASSES 共通
     ========================================================= */
  .lead-grid,
  .japan-grid,
  .quality-grid,
  .consult-grid,
  .rayban-grid {
    width: 100% !important;
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  .lead-text h2,
  .japan-text h2,
  .quality-text h2,
  .consult-text h2,
  .rayban-text h2,
  .clione-text h2 {
    font-size: 25px !important;
    letter-spacing: .06em;
  }

  .lead-photo img,
  .japan-photo img,
  .quality-photo img,
  .consult-photo img,
  .rayban-photo img {
    width: 100%;
    height: 230px !important;
  }

  /* FRAME */
  .rayban-gallery {
    width: 100% !important;
    grid-template-columns: 1fr !important;
    gap: 14px;
  }

  .rayban-sub {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px;
  }

  .rayban-main img,
  .rayban-sub img {
    width: 100%;
    height: auto;
    max-height: 260px;
    object-fit: cover;
  }

  .rayban-points {
    width: 100% !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    margin-top: 22px;
  }

  .rayban-points div {
    padding: 22px 12px;
  }

  .rayban-points strong {
    font-size: 34px;
  }

  .selection-grid {
    width: 100% !important;
    grid-template-columns: 1fr !important;
    gap: 18px;
  }

  /* LENS */
  .brand-grid {
    width: 100% !important;
    grid-template-columns: 1fr !important;
    gap: 18px;
  }

  .brand-card {
    padding: 28px 18px;
  }

  .brand-card h3 {
    font-size: 25px;
  }

  .reason-grid {
    width: 100% !important;
    grid-template-columns: 1fr !important;
    gap: 18px;
  }

  /* FRAME / LENS / SUNGLASSES product links */
  .product-link-grid {
    width: 100% !important;
    grid-template-columns: 1fr !important;
    gap: 16px;
  }

  .product-link-card {
    grid-template-columns: minmax(100px, 35%) minmax(0, 65%) !important;
    padding: 16px;
  }

  .product-link-card img {
    height: 105px;
  }

  .product-link-card h3 {
    font-size: 20px;
  }

  /* SUNGLASSES */
  .feature-grid,
  .scene-grid {
    width: 100% !important;
    grid-template-columns: 1fr !important;
    gap: 18px;
  }

  .scene-card img {
    width: 100%;
    height: 220px;
    object-fit: cover;
  }

  .clione-inner {
    width: 100% !important;
    grid-template-columns: 1fr !important;
    gap: 24px;
  }

  .clione-photo img {
    width: 100%;
    height: auto;
    max-height: 300px;
    object-fit: contain;
  }

  .shops-cta-inner {
    width: 100% !important;
    grid-template-columns: 1fr !important;
    gap: 18px;
    text-align: center;
  }

  /* =========================================================
     HISTORY / VIETNAM HISTORY
     ========================================================= */
  .origin-grid,
  .hokkaido-grid {
    width: 100% !important;
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  .origin-text h2,
  .hokkaido-text h2,
  .lead-text h2 {
    font-size: 25px;
  }

  .origin-photo img,
  .hokkaido-photo img {
    height: 230px;
  }

  .timeline {
    width: 100% !important;
  }

  .timeline::before {
    display: none;
  }

  .timeline-item {
    grid-template-columns: 1fr !important;
    gap: 10px;
    margin-bottom: 24px;
  }

  .timeline-year {
    text-align: left;
    padding-right: 0;
    font-size: 34px;
  }

  .timeline-dot {
    display: none;
  }

  .timeline-content {
    grid-template-columns: 1fr !important;
    gap: 14px;
    padding: 16px;
  }

  .timeline-content img {
    width: 100%;
    height: 180px;
    object-fit: contain;
  }

  .timeline-content h3 {
    font-size: 20px;
  }

  .philosophy-grid,
  .now-grid {
    width: 100% !important;
    grid-template-columns: 1fr !important;
    gap: 18px;
  }

  .now-card {
    border-right: none;
    border-bottom: 1px solid #ddd4c5;
  }

  /* vietnam-history */
  .overview-grid {
    width: 100% !important;
    grid-template-columns: 1fr !important;
  }

  .overview-card {
    border-right: none;
    border-bottom: 1px solid #ddd4c5;
    padding: 28px 18px;
  }

  .overview-card strong {
    font-size: 48px;
  }

  .area-grid {
    width: 100% !important;
    grid-template-columns: 1fr !important;
    gap: 18px;
  }

  /* =========================================================
     SHOPS（全国一覧）
     ========================================================= */
  .summary-grid {
    width: 100% !important;
    grid-template-columns: 1fr !important;
    gap: 24px;
  }

  .summary-map img {
    max-height: 240px;
    margin: 0 auto;
  }

  .summary-numbers {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px;
  }

  .summary-numbers strong {
    font-size: 32px;
  }

  .area-grid {
    width: 100% !important;
    grid-template-columns: 1fr !important;
    gap: 18px;
  }

  .guide-inner {
    width: 100% !important;
    grid-template-columns: 1fr !important;
    gap: 22px;
    padding: 24px 18px;
  }

  .guide-list {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px;
  }

  .contact-cta {
    min-width: 0 !important;
    width: 100%;
    padding: 35px 18px;
  }

  .contact-cta-inner {
    width: 100% !important;
    grid-template-columns: 1fr !important;
    gap: 18px;
    padding: 24px 18px;
    text-align: center;
  }

  /* =========================================================
     SHOPS NORTH / CENTRAL / SOUTH
     ========================================================= */
  .intro-grid {
    width: 100% !important;
    grid-template-columns: 1fr !important;
    gap: 24px;
  }

  .intro-text h2 {
    font-size: 25px;
  }

  .intro-photo img {
    width: 100%;
    height: 230px;
  }

  .city-nav-grid {
    width: 100% !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px;
  }

  .city-nav-card {
    padding: 16px 10px;
  }

  .city-heading {
    width: 100% !important;
    margin-bottom: 22px;
    padding-left: 14px;
  }

  .city-heading h2 {
    font-size: 25px;
  }

  .clione-feature {
    width: 100% !important;
    grid-template-columns: 1fr !important;
    gap: 20px;
  }

  .clione-feature .clione-photo img {
    height: auto;
    max-height: 280px;
  }

  .shop-grid,
  .shop-grid.two {
    width: 100% !important;
    grid-template-columns: 1fr !important;
    gap: 18px;
  }

  .shop-card img {
    width: 100%;
    height: 210px;
    object-fit: cover;
  }

  .shop-card dl {
    grid-template-columns: 72px minmax(0, 1fr) !important;
  }

  .shop-card dd {
  min-width: 0;
  overflow-wrap: anywhere;
  }

  .coming-grid {
    width: 100% !important;
    grid-template-columns: 1fr !important;
    gap: 18px;
  }

  .other-area-grid {
    width: 100% !important;
    grid-template-columns: 1fr !important;
    gap: 16px;
  }

  .other-area-card {
    min-width: 0;
  }

  /* =========================================================
     トップページで mobile.css を読む場合の安全策
     ========================================================= */
  .hero {
    min-width: 0 !important;
    width: 100%;
  }

  .hero-copy,
  .about-grid,
  .product-grid,
  .shops-grid,
  .contact {
    max-width: 100%;
  }

  /* LINEモーダル */
  .modal-content {
    width: calc(100% - 30px) !important;
    max-width: 100%;
    margin: 40px auto;
    padding: 25px 15px;
  }

  .line-area {
    flex-direction: column;
    align-items: center;
    gap: 25px;
  }

  .line-card {
    width: 100%;
  }

  .qr-large {
    width: 240px !important;
  }
    /* ===== Ray-Ban スマホ修正 ===== */
  .rayban-intro {
    width: 100% !important;
    max-width: 100%;
    margin: 0 auto 24px;
    padding: 0;
    text-align: center;
  }

  .rayban-intro h2 {
  font-size: clamp(24px, 7vw, 30px) !important;
  line-height: 1.4;
  letter-spacing: .05em;
  overflow-wrap: anywhere;
}

.rayban-intro p {
  width: 100%;
  max-width: 100%;
  font-size: 14px;
  line-height: 1.8;
  letter-spacing: .02em;
  overflow-wrap: anywhere;
}
  /* HOME：英語・ベトナム語の長い見出し対策 */
  .hero h1 {
    white-space: normal !important;
    overflow-wrap: normal;
    word-break: normal;
    max-width: 100%;
  }

  .hero-copy {
    min-width: 0;
    max-width: 100%;
  }
}
/* ===== English / Vietnamese Font ===== */

html[lang="en"] body,
html[lang="vi"] body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}