@charset "utf-8";
/* CSS Document */

/* ===== RESPONSIVE STYLES ===== */

/* Large Desktop (1200px and up) */
@media (min-width: 1200px) {
  #wrapper {
    padding: 0 2rem;
  }
  
  .info-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
  }
  
  .area-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
  }
  
  .section-title {
    font-size: 1.6rem;
    padding: 2.5rem 3rem;
  }
  
  .content-box {
    padding: 3rem;
  }
  
  .data-table th,
  .data-table td {
    padding: 1.5rem 1rem;
    font-size: 1rem;
  }
}

/* Desktop (992px to 1199px) */
@media (min-width: 992px) and (max-width: 1199px) {
  .info-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }
  
  .area-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }
  
  .footer-logos {
    gap: 1.5rem;
  }
  
  .data-table th,
  .data-table td {
    padding: 1.25rem 0.3rem;
    font-size: 0.9rem;
  }
}

/* Tablet (768px to 991px) */
@media (min-width: 768px) and (max-width: 991px) {
  #wrapper {
    width: 95%;
    padding: 0 1rem;
  }
  
  .section-title {
    font-size: 1.3rem;
    padding: 2rem 2rem;
  }
  
  .content-box {
    padding: 2rem;
  }
  
  .info-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
  }
  
  .info-item {
    padding: 1.25rem;
  }
  
  .area-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
  }
  
  .area-card {
    padding: 1.75rem;
  }
  
  .flow-step {
    padding: 1.75rem;
  }
  
  .step-number {
    width: 2.25rem;
    height: 2.25rem;
    font-size: 1rem;
  }
  
  .timeline-item {
    margin-bottom: 2rem;
    padding: 1.75rem;
  }
  
  .timeline-title {
    font-size: 1.2rem;
  }
  
  /* テーブル - シンプルに小さくするだけ */
  .data-table {
    font-size: 0.85rem;
  }
  
  .data-table th,
  .data-table td {
    padding: 1rem 0.3rem;
  }
  
  .footer-logos {
    gap: 1.25rem;
  }
  
  .footer-logos img {
    height: 2.5rem;
  }
  
  .footer-links {
    gap: 1.25rem;
  }
  
  .contact-card,
  .company-card {
    padding: 2rem;
  }
}

/* Mobile Large (576px to 767px) */
@media (min-width: 576px) and (max-width: 767px) {
  #wrapper {
    width: 95%;
    padding: 0 0.75rem;
  }
  

  
  .section-title {
    font-size: 1.2rem;
    padding: 1.75rem 1.5rem;
    flex-direction: column;
    gap: 0.75rem;
    text-align: center;
  }
  
  .section-title i {
    font-size: 1.5rem;
  }
  
  .content-box {
    padding: 1.75rem;
  }
  
  .info-grid {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
  
  .info-item {
    padding: 1.5rem;
  }
  
  .area-grid {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
  
  .area-card {
    padding: 1.5rem;
  }
  
  .area-name {
    font-size: 1.15rem;
    margin-bottom: 0.75rem;
  }
  
  .area-sports {
    font-size: 0.9rem;
  }
  
  .schedule-item {
    padding: 1.25rem;
  }
  
  .alert-box,
  .warning-box,
  .highlight-section {
    padding: 1.25rem 1.5rem;
  }
  
  .flow-step {
    flex-direction: column;
    text-align: center;
    padding: 1.5rem;
  }
  
  .step-number {
    align-self: center;
    margin-bottom: 1rem;
  }
  
  .timeline-item {
    margin-bottom: 1.5rem;
    padding: 1.5rem;
  }
  
  .timeline-title {
    font-size: 1.1rem;
  }
  
  .btn-primary {
    padding: 1rem 2rem;
    font-size: 1rem;
    width: 100%;
    justify-content: center;
  }
  
  /* テーブル - 横スクロールで対応 */
  .table-container {
    margin: 1.5rem 0;
    overflow-x: auto;
  }
  
  .data-table {
    font-size: 0.8rem;
    min-width: 500px;
  }
  
  .data-table th,
  .data-table td {
    padding: 0.875rem 0.2rem;
  }
  
  .contact-card,
  .company-card {
    padding: 1.75rem;
  }
  
  .contact-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
  
  .contact-item i {
    margin-bottom: 0.25rem;
  }
  
  .footer-logos {
    flex-direction: column;
    gap: 1rem;
  }
  
  .footer-logos img {
    height: 2rem;
  }
  
  .footer-links {
    flex-direction: column;
    gap: 1rem;
    text-align: center;
  }
  
  .compensation-item {
    padding: 1.25rem;
  }
  
  .insurance-item {
    flex-direction: column;
    gap: 0.5rem;
  }
  
  .insurance-type {
    min-width: auto;
    font-size: 0.9rem;
  }
  
  .insurance-amount {
    font-size: 0.85rem;
  }
  
  .rental-info,
  .other-area-info {
    padding: 1.5rem;
  }
}

/* Mobile Small (up to 575px) */
@media (max-width: 575px) {
  #wrapper {
    width: 100%;
   
  }
  
  body {
    font-size: 15px;
    line-height: 1.6;
  }
  

  .info-card {
    border-radius: 8px;
    margin-bottom: 2rem;
  }
  
  .section-title {
    font-size: 1.1rem;
    padding: 1.5rem 1.25rem;
    flex-direction: column;
    gap: 0.75rem;
    text-align: center;
  }
  
  .section-title i {
    font-size: 1.3rem;
  }
  
  .content-box {
    padding: 1.5rem;
  }
  
  .info-item {
    padding: 1.25rem;
  }
  
  .info-label {
    font-size: 0.85rem;
  }
  
  .info-value {
    font-size: 0.95rem;
  }
  
  .area-card {
    padding: 1.25rem;
  }
  
  .area-name {
    font-size: 1rem;
    padding: 0.5rem 1rem;
  }
  
  .area-sports {
    font-size: 0.85rem;
  }
  
  .schedule-item {
    padding: 1rem;
  }
  
  .schedule-label {
    font-size: 0.85rem;
  }
  
  .schedule-value {
    font-size: 0.9rem;
  }
  
  .alert-box,
  .warning-box,
  .highlight-section {
    padding: 1rem 1.25rem;
    margin: 1.5rem 0;
    font-size: 0.9rem;
  }
  
  .flow-step {
    padding: 1.25rem;
  }
  
  .step-number {
    width: 2rem;
    height: 2rem;
    font-size: 0.9rem;
  }
  
  .timeline-item {
    margin-bottom: 1.5rem;
    padding: 1.25rem;
  }
  
  .timeline-title {
    font-size: 1rem;
  }
  
  .timeline-period {
    font-size: 1.1rem;
    padding: 0.4rem 0.8rem;
  }
  
  .timeline-description {
    font-size: 0.9rem;
  }
  
  .timeline-notes li {
    font-size: 0.85rem;
  }
  
  .btn-primary {
    padding: 1rem 1.5rem;
    font-size: 0.95rem;
    border-radius: 30px;
  }
  
  .subsection-title {
    font-size: 1.1rem;
    margin: 2rem 0 1rem 0;
    padding: 0.75rem 0 0.75rem 1rem;
  }
  
  .detail-section h4 {
    font-size: 1rem;
    margin-bottom: 1rem;
  }
  
  /* テーブル - 横スクロールのみ、複雑な変換はしない */
  .data-table {
    font-size: 0.75rem;
    min-width: 450px;
  }
  
  .data-table th,
  .data-table td {
    padding: 0.75rem 0.2rem;
  }
  
  .contact-card,
  .company-card {
    padding: 1.5rem;
  }
  
  .contact-card h3,
  .company-card h3 {
    font-size: 1.2rem;
  }
  
  .contact-card h4,
  .company-card h4 {
    font-size: 1rem;
  }
  
  .contact-details {
    margin: 1rem 0;
  }
  
  .contact-item {
    margin-bottom: 0.75rem;
    font-size: 0.9rem;
  }
  
  .address-info p {
    font-size: 0.9rem;
    margin-bottom: 0.75rem;
  }
  
  .manager-info {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
  }
  
  .manager-info p {
    font-size: 0.85rem;
  }
  
  .registration-info {
    font-size: 0.8rem;
  }
  
  .certification-info {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1.25rem;
  }
  
  .certification-info span {
    font-size: 0.85rem;
  }
  
  footer {
    padding: 2rem 0.5rem 1rem 0.5rem;
  }
  
  .footer-info {
    margin: 1.5rem 0;
    font-size: 0.85rem;
  }
  
  .footer-logos {
    margin: 1.5rem 0;
  }
  
  .footer-logos img {
    height: 1.75rem;
  }
  
  .footer-links a {
    font-size: 0.8rem;
  }
  
  .copyright {
    font-size: 0.8rem;
  }
  
  .compensation-item {
    padding: 1rem;
  }
  
  .compensation-type {
    font-size: 0.9rem;
  }
  
  .compensation-detail {
    font-size: 0.8rem;
  }
  
  .rental-info,
  .other-area-info {
    padding: 1.25rem;
    font-size: 0.9rem;
  }
  
  .insurance-type {
    font-size: 0.85rem;
  }
  
  .insurance-amount {
    font-size: 0.8rem;
  }
  
  .rate-section h5 {
    font-size: 1rem;
    margin-bottom: 1rem;
  }
  
  .transportation-rates {
    margin: 1.5rem 0;
  }
  
  .basic-info li,
  .notice-list li,
  .note-list li,
  .detail-list li {
    font-size: 0.9rem;
    margin-bottom: 0.75rem;
    padding: 0.5rem 0 0.5rem 1.75rem;
  }
  
  .important-notice {
    padding: 1.25rem;
  }
  
  .note {
    font-size: 0.8rem;
    padding: 0.5rem 0.75rem;
  }
  
  .warning {
    font-size: 0.9rem;
  }
  
  .attention {
    font-size: 1rem;
    padding: 0.15rem 0.4rem;
  }
  
  .contact-info {
    padding: 1.25rem;
  }
  
  .timeline-section {
    padding: 0 0.5rem;
  }
}

/* Extra Small Mobile (up to 375px) */
@media (max-width: 375px) {
  #wrapper {
    
  }
  
  body {
    font-size: 14px;
  }
  
  .section-title {
    font-size: 1rem;
    padding: 1.25rem 1rem;
  }
  
  .content-box {
    padding: 1.25rem;
  }
  
  .info-item {
    padding: 1rem;
  }
  
  .area-card {
    padding: 1rem;
  }
  
  .timeline-item {
    padding: 1rem;
  }
  
  .data-table {
    font-size: 0.7rem;
    min-width: 400px;
  }
  
  .data-table th,
  .data-table td {
    padding: 0.6rem 0.2rem;
  }
  
  .contact-card,
  .company-card {
    padding: 1.25rem;
  }
  
  .btn-primary {
    padding: 0.875rem 1.25rem;
    font-size: 0.9rem;
  }
  
  .alert-box,
  .warning-box,
  .highlight-section {
    padding: 0.875rem 1rem;
  }
  
  .flow-step {
    padding: 1rem;
  }
  
  .compensation-item {
    padding: 0.875rem;
  }
  
  .rental-info,
  .other-area-info {
    padding: 1rem;
  }
  
  .contact-info {
    padding: 1rem;
  }
  
  .certification-info {
    padding: 1rem;
  }
  
  .attention {
    font-size: 0.9rem;
    padding: 0.1rem 0.3rem;
  }
  
  .timeline-period {
    font-size: 1rem;
    padding: 0.3rem 0.6rem;
  }
}

/* 残りのメディアクエリは同じ */
@media (max-height: 500px) and (orientation: landscape) {
  .section-title {
    padding: 1rem 1.5rem;
  }
  
  .step-number {
    width: 1.75rem;
    height: 1.75rem;
    font-size: 0.8rem;
  }
  
  .flow-step {
    flex-direction: row;
    text-align: left;
  }
  
  .step-number {
    align-self: flex-start;
    margin-bottom: 0;
  }
  
  .content-box {
    padding: 1.5rem;
  }
}

@media print {
  #wrapper {
    width: 100%;
    padding: 0;
  }
  
  .section-title {
    background: none !important;
    color: black !important;
    border-bottom: 2px solid black;
    padding: 1rem 0;
  }
  
  .info-card {
    box-shadow: none;
    border: 1px solid black;
    break-inside: avoid;
    margin-bottom: 1rem;
  }
  
  .content-box {
    padding: 1rem;
  }
  
  .btn-primary {
    display: none;
  }
  
  .area-card {
    background: white !important;
    color: black !important;
    border: 1px solid black;
  }
  
  .data-table th {
    background: #f0f0f0 !important;
    color: black !important;
  }
  
  .data-table th,
  .data-table td {
    border: 1px solid black !important;
  }
  
  .alert-box,
  .warning-box,
  .highlight-section {
    border: 1px solid black;
    background: white !important;
  }
  
  .timeline-item {
    border: 1px solid black;
    box-shadow: none;
  }
  
  .attention {
    background: white !important;
    color: black !important;
    border: 1px solid black;
  }
  
  .timeline-period {
    background: white !important;
    color: black !important;
    border: 1px solid black;
  }
}

@media (prefers-contrast: high) {
  .info-card {
    border: 2px solid #000;
  }
  
  .section-title {
    background: #000 !important;
    color: #fff !important;
  }
  
  .btn-primary {
    background: #000 !important;
    border: 2px solid #000;
  }
  
  .area-card {
    background: #000 !important;
    border: 2px solid #000;
  }
  
  .data-table th {
    background: #000 !important;
    color: #fff !important;
  }
  
  .data-table td {
    border-color: #000 !important;
  }
  
  .attention {
    background: #000 !important;
    color: #fff !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  
  .hover-lift:hover {
    transform: none;
  }
  
  .area-card:hover {
    transform: none;
  }
  
  .btn-primary:hover {
    transform: none;
  }
}

@media (hover: none) and (pointer: coarse) {
  .btn-primary {
    min-height: 48px;
    min-width: 48px;
  }
  
  .area-card {
    min-height: 48px;
    padding: 1.5rem;
  }
  
  .contact-item {
    min-height: 48px;
    padding: 0.75rem 0;
  }
  
  .data-table th,
  .data-table td {
    min-height: 44px;
  }
}
/* Tablet (768px to 991px) */
@media (min-width: 768px) and (max-width: 991px) {
  /* ... 他のスタイルは同じ ... */
  
  footer {
    padding: 1.25rem 1rem 0.5rem 1rem;
  }
  
  footer section {
    margin-bottom: 0.75rem;
  }
  
  footer .contact-card,
  footer .company-card {
    padding: 0.75rem;
    margin-bottom: 0.75rem;
  }
  
  .footer-logos {
    margin: 0.75rem 0;
    gap: 0.75rem;
  }
  
  .footer-logos img {
    height: 2rem;
  }
  
  .footer-links {
    margin: 0.75rem 0;
    gap: 0.75rem;
  }
}

/* Mobile Large (576px to 767px) */
@media (min-width: 576px) and (max-width: 767px) {
  /* ... 他のスタイルは同じ ... */
  
  footer {
    padding: 1rem 0.75rem 0.5rem 0.75rem;
  }
  
  footer section {
    margin-bottom: 0.5rem;
  }
  
  footer .section-title {
    padding: 0.75rem 1rem;
  }
  
  footer .contact-card,
  footer .company-card {
    padding: 0.75rem;
    margin-bottom: 0.5rem;
  }
  
  footer h3 {
    margin-bottom: 0.25rem;
  }
  
  footer h4 {
    margin-bottom: 0.25rem;
  }
  
  .footer-info {
    margin: 0.75rem 0;
    padding: 0.5rem 0;
  }
  
  .footer-logos {
    flex-direction: column;
    gap: 0.5rem;
    margin: 0.75rem 0;
    padding: 0.25rem 0;
  }
  
  .footer-logos img {
    height: 1.75rem;
  }
  
  .footer-links {
    flex-direction: column;
    gap: 0.5rem;
    text-align: center;
    margin: 0.75rem 0;
    padding: 0.25rem 0;
  }
  
  footer .contact-item {
    margin-bottom: 0.25rem;
    padding: 0.125rem 0;
  }
  
  footer .address-info p {
    margin-bottom: 0.25rem;
    padding: 0.125rem 0;
  }
  
  footer .manager-info {
    margin-top: 0.5rem;
    padding-top: 0.5rem;
  }
  
  footer .manager-info p {
    margin-bottom: 0.25rem;
  }
}

/* Mobile Small (up to 575px) */
@media (max-width: 575px) {
  /* ... 他のスタイルは同じ ... */
  
  footer {
    padding: 0.75rem 0.5rem 0.25rem 0.5rem;
  }
  
  footer section {
    margin-bottom: 0.5rem;
  }
  
  footer .section-title {
    padding: 0.6rem 0.75rem;
  }
  
  footer .contact-card,
  footer .company-card {
    padding: 0.6rem;
    margin-bottom: 0.5rem;
  }
  
  footer h3 {
    margin-bottom: 0.25rem;
  }
  
  footer h4 {
    margin-bottom: 0.25rem;
  }
  
  footer p {
    margin-bottom: 0.25rem;
  }
  
  .footer-info {
    margin: 0.5rem 0;
    padding: 0.5rem 0;
  }
  
  .footer-info p {
    margin-bottom: 0.125rem;
  }
  
  .footer-logos {
    margin: 0.5rem 0;
    padding: 0.25rem 0;
    gap: 0.5rem;
  }
  
  .footer-logos img {
    height: 1.5rem;
  }
  
  .footer-links {
    margin: 0.5rem 0;
    padding: 0.25rem 0;
    gap: 0.5rem;
  }
  
  .copyright {
    padding: 0.5rem 0 0.25rem 0;
  }
  
  footer .contact-item {
    margin-bottom: 0.125rem;
    padding: 0.125rem 0;
  }
  
  footer .address-info p {
    margin-bottom: 0.125rem;
    padding: 0.125rem 0;
  }
  
  footer .manager-info {
    margin-top: 0.5rem;
    padding-top: 0.5rem;
  }
  
  footer .manager-info p {
    margin-bottom: 0.125rem;
  }
  
  footer .contact-details {
    margin: 0.25rem 0;
  }
  
  footer .certification-info {
    padding: 0.25rem;
    margin: 0.25rem 0;
  }
}

/* Extra Small Mobile (up to 375px) */
@media (max-width: 375px) {
  /* ... 他のスタイルは同じ ... */
  
  footer {
    padding: 0.5rem 0.25rem 0.25rem 0.25rem;
  }
  
  footer section {
    margin-bottom: 0.25rem;
  }
  
  footer .section-title {
    padding: 0.5rem 0.6rem;
  }
  
  footer .contact-card,
  footer .company-card {
    padding: 0.5rem;
    margin-bottom: 0.25rem;
  }
  
  .footer-info {
    margin: 0.25rem 0;
    padding: 0.25rem 0;
  }
  
  .footer-logos {
    margin: 0.25rem 0;
    padding: 0.125rem 0;
  }
  
  .footer-logos img {
    height: 1.25rem;
  }
  
  .footer-links {
    margin: 0.25rem 0;
    padding: 0.125rem 0;
  }
  
  .copyright {
    padding: 0.25rem 0;
  }
  
  footer .manager-info {
    margin-top: 0.25rem;
    padding-top: 0.25rem;
  }
}

/* ===== NAVIGATION RESPONSIVE STYLES ===== */

/* Tablet (768px to 991px) */
@media (min-width: 768px) and (max-width: 991px) {
  .nav-menu {
    gap: 0.25rem;
  }
  
  .nav-link {
    padding: 0.6rem 0.8rem;
    font-size: 0.85rem;
  }
  
  .nav-link i {
    font-size: 0.75rem;
  }
  

  
  html {
    scroll-padding-top: 4.5rem;
  }
  
  section[id] {
    scroll-margin-top: 4.5rem;
  }
}

/* Mobile Large (576px to 767px) */
@media (min-width: 576px) and (max-width: 767px) {
  .hamburger-btn {
    display: flex;
  }
  
  .nav-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    border-radius: 0 0 8px 8px;
    flex-direction: column;
    padding: 1rem;
    gap: 0.5rem;
    z-index: 1000;
  }
  
  .nav-menu.active {
    display: flex;
  }
  
  .nav-item {
    width: 100%;
  }
  
  .nav-link {
    width: 100%;
    padding: 1rem;
    justify-content: flex-start;
    font-size: 0.95rem;
    border-radius: 6px;
  }
  
  .nav-link i {
    font-size: 0.9rem;
    width: 1.2rem;
  }
  

  
  html {
    scroll-padding-top: 4rem;
  }
  
  section[id] {
    scroll-margin-top: 4rem;
  }
}

/* Mobile Small (up to 575px) */
@media (max-width: 575px) {
  .hamburger-btn {
    display: flex;
    width: 2.5rem;
    height: 2.5rem;
  }
  
  .hamburger-line {
    width: 1.25rem;
  }
  
  .nav-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    border-radius: 0 0 8px 8px;
    flex-direction: column;
    padding: 0.75rem;
    gap: 0.25rem;
    z-index: 1000;
  }
  
  .nav-menu.active {
    display: flex;
  }
  
  .nav-item {
    width: 100%;
  }
  
  .nav-link {
    width: 100%;
    padding: 0.875rem;
    justify-content: flex-start;
    font-size: 0.9rem;
    border-radius: 6px;
  }
  
  .nav-link i {
    font-size: 0.85rem;
    width: 1.1rem;
  }
  

  
  html {
    scroll-padding-top: 3.5rem;
  }
  
  section[id] {
    scroll-margin-top: 3.5rem;
  }
}

/* Extra Small Mobile (up to 375px) */
@media (max-width: 375px) {
  .nav-container {
    padding: 0 0.5rem;
  }
  
  .hamburger-btn {
    width: 2.25rem;
    height: 2.25rem;
  }
  
  .hamburger-line {
    width: 1rem;
  }
  
  .nav-menu {
    padding: 0.5rem;
  }
  
  .nav-link {
    padding: 0.75rem;
    font-size: 0.85rem;
  }
  
  .nav-link i {
    font-size: 0.8rem;
    width: 1rem;
  }
  

}

/* Landscape Mobile */
@media (max-height: 500px) and (orientation: landscape) {
  .nav-container {
    padding: 0 1rem;
  }
  
  .nav-menu {
    padding: 0.5rem 0;
  }
  
  .nav-link {
    padding: 0.5rem 0.75rem;
  }
  

}

.sp{
	display: none!important;
}

@media (max-width: 768px) {
	.header-image{
		margin-top: 5rem;
	}
	.sp{
		display: block!important;
	}
}

/* ===== YES/NO PAGE SIMPLE RESPONSIVE ===== */

/* Mobile (up to 767px) */
@media (max-width: 767px) {
  #yesnocontents {
    padding: 1.5rem 0.75rem;
  }
  
  #yesnocontents > div ul li {
    padding: 0.75rem;
    font-size: 0.85rem;
  }
  
  .yes_no {
    flex-direction: column;
    gap: 0.75rem;
  }
  
  .yes_no p {
    max-width: 100%;
  }
  
  .yes_no a {
    padding: 1.25rem 1rem;
  }
  
  .yes_no a span {
    font-size: 1.25rem;
  }
  
  #yesnocontents > p.center:last-of-type {
    padding: 0.875rem;
    font-size: 0.9rem;
  }
}

/* Small Mobile (up to 480px) */
@media (max-width: 480px) {
  #yesnocontents {
    padding: 1rem 0.5rem;
  }
  
  #yesnocontents > div ul li {
    padding: 0.625rem;
    font-size: 0.8rem;
  }
  
  .yes_no a {
    padding: 1rem 0.75rem;
    font-size: 0.9rem;
  }
  
  .yes_no a span {
    font-size: 1.1rem;
  }
}

/* ===== TABLE RESPONSIVE IMPROVEMENTS ===== */

/* Desktop (1200px以上) - 通常のパディング */
@media (min-width: 1200px) {
  .data-table th,
  .data-table td {
    padding: 1.5rem 1rem;
    font-size: 1rem;
  }
  
  .cancellation-table th,
  .cancellation-table td {
    padding: 1.25rem 0.875rem;
    font-size: 0.9rem;
  }
  
  .rate-table th,
  .rate-table td {
    padding: 1.25rem 0.75rem;
    font-size: 0.9rem;
  }
}

/* Desktop (992px-1199px) - 標準パディング */
@media (min-width: 992px) and (max-width: 1199px) {
  .data-table th,
  .data-table td {
    padding: 1.25rem 0.875rem;
    font-size: 0.9rem;
  }
  
  .cancellation-table th,
  .cancellation-table td {
    padding: 1rem 0.75rem;
    font-size: 0.85rem;
  }
  
  .rate-table th,
  .rate-table td {
    padding: 1rem 0.625rem;
    font-size: 0.85rem;
  }
}

/* Tablet (768px-991px) - 少し狭く */
@media (min-width: 768px) and (max-width: 991px) {
  .data-table th,
  .data-table td {
    padding: 1rem 0.5rem;
    font-size: 0.85rem;
    line-height: 1.4;
  }
  
  .cancellation-table th,
  .cancellation-table td {
    padding: 0.875rem 0.4rem;
    font-size: 0.8rem;
    line-height: 1.3;
  }
  
  .rate-table th,
  .rate-table td {
    padding: 0.875rem 0.375rem;
    font-size: 0.8rem;
    line-height: 1.3;
  }
  
  /* テーブル全体を少し小さく */
  .table-container {
    font-size: 0.9rem;
  }
  
  /* 改行を許可 */
  .data-table th,
  .data-table td {
    white-space: normal;
    word-break: keep-all;
    overflow-wrap: break-word;
  }
}

/* Mobile Large (576px-767px) - さらに狭く */
@media (min-width: 576px) and (max-width: 767px) {
  .data-table th,
  .data-table td {
    padding: 0.875rem 0.35rem;
    font-size: 0.8rem;
    line-height: 1.4;
  }
  
  .cancellation-table th,
  .cancellation-table td {
    padding: 0.75rem 0.3rem;
    font-size: 0.75rem;
    line-height: 1.3;
  }
  
  .rate-table th,
  .rate-table td {
    padding: 0.75rem 0.25rem;
    font-size: 0.75rem;
    line-height: 1.3;
  }
  
  /* 改行を許可してコンパクトに */
  .data-table th,
  .data-table td {
    white-space: normal;
    word-break: keep-all;
    overflow-wrap: break-word;
  }
  
  /* 特に長いヘッダーテキストの調整 */
  .cancellation-table th {
    font-size: 0.7rem;
    padding: 0.6rem 0.25rem;
  }
  
  /* テーブル最小幅調整 */
  .data-table {
    min-width: 480px;
  }
  
  .cancellation-table {
    min-width: 450px;
  }
  
  .rate-table {
    min-width: 420px;
  }
}

/* Mobile Small (up to 575px) - 最小パディング */
@media (max-width: 575px) {
  .data-table th,
  .data-table td {
    padding: 0.75rem 0.25rem;
    font-size: 0.75rem;
    line-height: 1.3;
  }
  
  .cancellation-table th,
  .cancellation-table td {
    padding: 0.6rem 0.2rem;
    font-size: 0.7rem;
    line-height: 1.2;
  }
  
  .rate-table th,
  .rate-table td {
    padding: 0.6rem 0.15rem;
    font-size: 0.7rem;
    line-height: 1.2;
  }
  
  /* テーブル全体をさらに小さく */
  .table-container {
    font-size: 0.85rem;
  }
  
  /* 最小幅を調整 */
  .data-table {
    min-width: 400px; /* 450pxから400pxに縮小 */
  }
  
  /* 取消料テーブル専用の調整 */
  .cancellation-table {
    min-width: 380px;
  }
  
  .cancellation-table th {
    font-size: 0.65rem;
    padding: 0.5rem 0.15rem;
  }
  
  .cancellation-table td {
    font-size: 0.7rem;
    padding: 0.6rem 0.2rem;
  }
  
  /* 料金テーブル */
  .rate-table {
    min-width: 360px;
  }
  
  .rate-table th,
  .rate-table td {
    padding: 0.5rem 0.1rem;
    font-size: 0.65rem;
  }
  
  /* 改行とテキスト調整 */
  .data-table th,
  .data-table td {
    white-space: normal;
    word-break: keep-all;
    overflow-wrap: break-word;
  }
  
  /* スクロール注意文 */
  .sp {
    display: block !important;
    font-size: 0.8rem;
    color: #6c757d;
    text-align: center;
    margin-bottom: 0.5rem;
  }
}

/* Extra Small Mobile (up to 375px) - 極小パディング */
@media (max-width: 375px) {
  .data-table th,
  .data-table td {
    padding: 0.6rem 0.15rem;
    font-size: 0.7rem;
    line-height: 1.2;
  }
  
  .cancellation-table th,
  .cancellation-table td {
    padding: 0.5rem 0.1rem;
    font-size: 0.65rem;
    line-height: 1.1;
  }
  
  .rate-table th,
  .rate-table td {
    padding: 0.5rem 0.08rem;
    font-size: 0.65rem;
    line-height: 1.1;
  }
  
  .data-table {
    min-width: 350px; /* さらに縮小 */
  }
  
  .cancellation-table {
    min-width: 330px;
  }
  
  .rate-table {
    min-width: 320px;
  }
  
  /* 改行とテキスト調整 */
  .data-table th,
  .data-table td {
    word-break: break-all; /* 必要に応じて単語を分割 */
  }
  
  /* 特に小さい画面での調整 */
  .cancellation-table th {
    font-size: 0.6rem;
    padding: 0.4rem 0.08rem;
  }
  
  .rate-table .price-cell {
    font-size: 0.6rem;
  }
}

/* 特定のテーブルクラス用の追加調整 */

/* 宿泊施設のお知らせ方法テーブル */
.schedule-table {
  @media (max-width: 767px) {
    .data-table th,
    .data-table td {
      padding: 0.75rem 0.25rem;
    }
  }
  
  @media (max-width: 575px) {
    .data-table th,
    .data-table td {
      padding: 0.6rem 0.2rem;
    }
  }
  
  @media (max-width: 375px) {
    .data-table th,
    .data-table td {
      padding: 0.5rem 0.15rem;
    }
  }
}

/* テーブル内の強調テキスト調整 */
@media (max-width: 767px) {
  .data-table .attention {
    font-size: 0.9rem;
    padding: 0.15rem 0.4rem;
    margin: 0 0.05rem;
  }
}

@media (max-width: 575px) {
  .data-table .attention {
    font-size: 0.8rem;
    padding: 0.1rem 0.3rem;
    margin: 0 0.05rem;
  }
  
  .cancellation-table .highlight-cell {
    font-size: 0.65rem;
  }
  
  .rate-table .price-cell {
    font-size: 0.65rem;
  }
}

@media (max-width: 375px) {
  .data-table .attention {
    font-size: 0.75rem;
    padding: 0.05rem 0.2rem;
  }
  
  .cancellation-table .highlight-cell {
    font-size: 0.6rem;
  }
  
  .rate-table .price-cell {
    font-size: 0.6rem;
  }
}

/* 横スクロール時の改善 */
.table-container {
  @media (max-width: 767px) {
    /* スクロールバーのスタイリング（Webkit系ブラウザ） */
    scrollbar-width: thin;
    scrollbar-color: #c1c1c1 #f1f1f1;
  }
  
  .table-container::-webkit-scrollbar {
    height: 8px;
  }
  
  .table-container::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
  }
  
  .table-container::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 4px;
  }
  
  .table-container::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
  }
}

/* テーブルキャプション/説明文の調整 */
@media (max-width: 767px) {
  .table-container + p,
  .table-container + .note {
    font-size: 0.85rem;
    margin-top: 0.75rem;
  }
}

@media (max-width: 575px) {
  .table-container + p,
  .table-container + .note {
    font-size: 0.8rem;
    margin-top: 0.5rem;
  }
}

@media (max-width: 375px) {
  .table-container + p,
  .table-container + .note {
    font-size: 0.75rem;
    margin-top: 0.5rem;
  }
}

/* 印刷時の調整 */
@media print {
  .data-table th,
  .data-table td {
    padding: 0.5rem 0.25rem !important;
    font-size: 0.8rem !important;
    border: 1px solid black !important;
  }
  
  .cancellation-table th,
  .cancellation-table td {
    padding: 0.4rem 0.2rem !important;
    font-size: 0.75rem !important;
  }
  
  .rate-table th,
  .rate-table td {
    padding: 0.4rem 0.2rem !important;
    font-size: 0.75rem !important;
  }
  
  .table-container {
    overflow: visible !important;
  }
  
  .data-table {
    min-width: auto !important;
  }
}

/* ハイコントラストモード */
@media (prefers-contrast: high) {
  .data-table th,
  .data-table td {
    border-color: #000 !important;
  }
  
  .cancellation-table .highlight-cell {
    background: #000 !important;
    color: #fff !important;
  }
  
  .rate-table .price-cell {
    background: #000 !important;
    color: #fff !important;
  }
}

/* タッチデバイス用の調整 */
@media (hover: none) and (pointer: coarse) {
  .data-table th,
  .data-table td {
    min-height: 44px; /* タッチしやすい最小サイズ */
  }
  
  @media (max-width: 575px) {
    .data-table th,
    .data-table td {
      min-height: 40px;
    }
  }
}

/* 横向き表示時の調整 */
@media (max-height: 500px) and (orientation: landscape) {
  .data-table th,
  .data-table td {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }
  
  .cancellation-table th,
  .cancellation-table td {
    padding-top: 0.4rem;
    padding-bottom: 0.4rem;
  }
  
  .rate-table th,
  .rate-table td {
    padding-top: 0.4rem;
    padding-bottom: 0.4rem;
  }
}


/* ===== FIX: prevent horizontal wobble on responsive ===== */
@media (max-width: 991px) {
  html, body {
    overflow-x: hidden;
  }
}