@charset "UTF-8";

/* =================================================================*********
   Ticket Page Styles
   ========================================================================== */

/* Add specific styles for the Ticket page here if needed.
   Global common styles (Hero, Breadcrumbs, etc.) are inherited from main style.css. */

/* Admission Fees Section */
/* Admission Fees Section */
.ticket-admission {
   background-color: #fcfaf7;
   /* Texture bg */
   padding-top: 150px;
   padding-bottom: 150px;
}

/* Discount Services Section */
.ticket-discount {
   background-image: url('../images/ticket_bg.webp');
   /* Texture bg image */
   background-repeat: repeat;
   background-size: auto;
   background-color: #f1ebd8;
   /* Fallback */
   padding-top: 150px;
   /* Increased vertical spacing */
   padding-bottom: 150px;
}

.ticket-discount .section-title {
   display: flex;
   align-items: center;
   justify-content: center;
   margin-bottom: 20px;
   /* Reduced margin for decoration space */
   color: #333;
   font-size: 2.4rem;
   font-family: "Zen Old Mincho", serif;
   font-weight: 500;
}

/* No side lines for this specific title based on image, or add decoration element handling if needed */
/* Override previous general rule if needed, but 'ticket-admission' was specific. */
/* Wait, user wanted Side Lines for the PREVIOUS section. For THIS section, the image shows NO side lines, but a decoration below. */

.ticket-discount .section-decoration {
   text-align: center;
   margin-bottom: 60px;
   /* Space between title/decoration and content */
}

.ticket-discount .section-decoration img {
   width: 60px;
   /* Adjust size of SVG */
   height: auto;
}

.ticket-discount .section-decoration::after {
   display: none;
   /* Remove placeholder */
}

.discount-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 40px;
   max-width: 1000px;
   margin: 0 auto;
}

.discount-item {
   text-align: center;
}

.discount-title {
   font-family: "Zen Old Mincho", serif;
   font-size: 1.8rem;
   margin-bottom: 20px;
   font-weight: 500;
}

.discount-banner img {
   width: 100%;
   height: auto;
   box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
   margin-bottom: 20px;
}

.discount-desc {
   font-size: 0.95rem;
   line-height: 1.8;
   text-align: left;
}

.discount-desc small {
   display: block;
   font-size: 0.85em;
   color: #555;
   margin-top: 5px;
}

@media (max-width: 768px) {
   .discount-grid {
      grid-template-columns: 1fr;
      gap: 60px;
   }

   .ticket-discount .section-title {
      font-size: 1.8rem;
   }
}

/* Disability and Group Discount Section */
.ticket-other-discount {
   background-color: #fcfaf7;
   /* Texture bg */
   padding-top: 100px;
   padding-bottom: 150px;
}

.ticket-other-discount .disability-discount {
   margin-bottom: 100px;
}

.ticket-other-discount .section-title {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 30px;
   margin-bottom: 30px;
   color: #333;
}

.ticket-other-discount .section-title .ja {
   font-size: 2.0rem;
   /* Slightly smaller than 2.4rem */
   font-family: "Zen Old Mincho", serif;
   font-weight: 500;
   color: #333;
}

/* No side lines shown in reference image for Disability/Group titles, they look plain centered?
   Wait, the image shows "障がい者様割引" centered, plain text? No, it often has the theme style.
   But looking at the provided image 4 (Step 1422):
   "障がい者様割引" is centered. Large font.
   "団体割引" is below.
   Let's check the image again.
   The image shows "障がい者様割引" in large serif font, centered. No lines visible in the snippet?
   Wait, the user said "make the previous one like the reference".
   For THIS section, let's assume consistent styling or matching the image.
   The image shows simple centered text for title.
   Let's stick to the generic clean style unless lines are requested.
*/

.ticket-other-discount .section-desc {
   text-align: center;
   font-size: 1rem;
   margin-bottom: 40px;
   line-height: 1.8;
}

.group-discount {
   text-align: center;
}

.group-discount .section-title .ja {
   font-size: 2.0rem;
   /* Match size */
}

@media (max-width: 768px) {
   .ticket-other-discount .section-title .ja {
      font-size: 1.8rem;
   }
}

.ticket-admission .section-title {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 30px;
   margin-bottom: 50px;
   color: #333;
}

.ticket-admission .section-title .ja {
   font-size: 2.4rem;
   font-family: "Zen Old Mincho", serif;
   font-weight: 500;
   color: #333;
}

.ticket-admission .section-title::before,
.ticket-admission .section-title::after {
   content: "";
   display: block;
   width: 60px;
   height: 1px;
   background-color: #333;
}

@media (max-width: 768px) {
   .ticket-admission .section-title .ja {
      font-size: 1.8rem;
   }

   .ticket-admission .section-title::before,
   .ticket-admission .section-title::after {
      width: 30px;
   }
}

.ticket-table-wrapper {
   max-width: 800px;
   margin: 0 auto;
}

.ticket-table {
   width: 100%;
   border-collapse: collapse;
   border: 1px solid #333;
   font-family: "Zen Old Mincho", serif;
}

.ticket-table th,
.ticket-table td {
   border: 1px solid #333;
   padding: 20px;
   text-align: center;
   vertical-align: middle;
}

.ticket-table th {
   background-color: #997c22;
   /* Lockheart Gold/Brown */
   color: #fff;
   font-weight: 500;
   width: 35%;
   /* Adjust width ratio */
   font-size: 1.4rem;
}

.ticket-table td {
   background-color: #fff;
   color: #333;
   font-size: 1.6rem;
   font-weight: 500;
}

.ticket-table .note {
   display: block;
   font-size: 0.8rem;
   margin-top: 5px;
   font-weight: normal;
}

@media (max-width: 768px) {

   .ticket-table th,
   .ticket-table td {
      display: block;
      width: 100%;
   }

   .ticket-table th {
      font-size: 1.2rem;
      padding: 15px;
   }

   .ticket-table td {
      font-size: 1.4rem;
      padding: 15px;
   }
}

/* Usage Guidelines Section */
.ticket-usage {
   background-color: #fcfaf7;
   /* Texture bg */
   padding-top: 100px;
   padding-bottom: 200px;
   /* Extra bottom padding as per usual final sections */
}

.ticket-usage .section-title {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 30px;
   margin-bottom: 80px;
   color: #333;
}

.ticket-usage .section-title .ja {
   font-size: 2.4rem;
   font-family: "Zen Old Mincho", serif;
   font-weight: 500;
   color: #333;
}

.ticket-usage .section-title::before,
.ticket-usage .section-title::after {
   content: "";
   display: block;
   width: 60px;
   height: 1px;
   background-color: #333;
}

.usage-guidelines {
   max-width: 900px;
   margin: 0 auto;
}

.usage-block {
   margin-bottom: 60px;
}

.usage-title {
   font-size: 1.6rem;
   font-family: "Zen Old Mincho", serif;
   font-weight: 500;
   margin-bottom: 20px;
   color: #333;
}

.usage-list {
   list-style: none;
   padding: 0;
   margin: 0;
}

.usage-list li {
   position: relative;
   padding-left: 1.5em;
   margin-bottom: 10px;
   font-size: 1rem;
   line-height: 1.8;
}

.usage-list li::before {
   content: "●";
   position: absolute;
   left: 0;
   color: #333;
   font-size: 0.8em;
   top: 0.1em;
}

/* Button Styles */
.btn-wrapper {
   text-align: center;
   margin-top: 60px;
}

.btn-gold {
   display: inline-block;
   padding: 15px 60px;
   background-color: #997c22;
   color: #fff;
   text-decoration: none;
   font-size: 1rem;
   position: relative;
   transition: all 0.3s ease;
   font-family: "Zen Old Mincho", serif;
}

.btn-gold::after {
   content: "›";
   position: absolute;
   right: 20px;
   top: 50%;
   transform: translateY(-50%);
   font-size: 1.2rem;
}

.btn-gold:hover {
   background-color: #7d651b;
   color: #fff;
}

@media (max-width: 768px) {
   .ticket-usage .section-title .ja {
      font-size: 1.8rem;
   }

   .ticket-usage .section-title::before,
   .ticket-usage .section-title::after {
      width: 30px;
   }
}

/* Mobile spacing adjustments for ticket page */
@media (max-width: 768px) {

   .ticket-admission .container,
   .ticket-discount .container,
   .ticket-other-discount .container,
   .ticket-usage .container {
      padding-left: 16px;
      padding-right: 16px;
   }

   .ticket-admission {
      padding-top: 80px;
      padding-bottom: 80px;
   }

   .ticket-discount {
      padding-top: 80px;
      padding-bottom: 80px;
   }

   .ticket-other-discount {
      padding-top: 70px;
      padding-bottom: 90px;
   }

   .ticket-usage {
      padding-top: 70px;
      padding-bottom: 110px;
   }

   .ticket-admission .section-title {
      margin-bottom: 32px;
   }

   .ticket-discount .section-decoration {
      margin-bottom: 32px;
   }

   .ticket-other-discount .disability-discount {
      margin-bottom: 60px;
   }

   .ticket-other-discount .section-desc {
      margin-bottom: 28px;
   }

   .ticket-usage .section-title {
      margin-bottom: 44px;
   }

   .usage-block {
      margin-bottom: 40px;
   }

   .btn-wrapper {
      margin-top: 40px;
   }
}