@import url('https://fonts.googleapis.com/css2?family=Zen+Antique&display=swap');

/* Basic reset and body styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* body */
body {
    position: relative;
    /* Required for positioning the pseudo-element */
    line-height: 1.6;
    background-image: url(../img/BG.jpeg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    color: #302d2d;
    /* Standard text color */
    font-family: 'Noto Sans JP', sans-serif;
    /* Clean and modern for body text */
}

body::before {
    content: '';
    /* Required for the pseudo-element */
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* background-color: rgba(13, 124, 102, .8); White overlay with 50% transparency */
    z-index: 1;
    /* Place it above the background but below text */
}

/* Ensure text appears above the overlay */
body * {
    position: relative;
    /* Ensure child elements are above the overlay */
    z-index: 2;
    /* Make sure they are above the overlay */
}

/* body */
/* Header styles */
header {
    max-width: 1400px;
    margin: 0 auto;
    /* background: linear-gradient(180deg, #ff9966, #ffcc99);    Medium to light blue gradient */
    padding: 30px 20px;
    text-align: center;
    /* border-radius: 2px;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3); */
    position: relative;
    font-family: "Zen Antique", serif;
    font-style: normal;
}

/* Header main title styles */
header h1 {
    font-size: 4em;
    /* Larger font size for main title */
    margin-bottom: 10px;
    /* Space below main title */
    font-weight: 600;
    /* Bold font for emphasis */
    background: linear-gradient(120deg, #F72C5B, #FF748B);
    /* Gradient from dark to light orange */
    -webkit-background-clip: text;
    /* Clips the background to the text */
    -webkit-text-fill-color: transparent;
    /* Makes the text color transparent to show the gradient */
    -webkit-text-stroke: 1px #685757;
    /*Brown stroke with specified width */
    font-family: "Zen Antique", serif;
    font-style: normal;
}


/* Header theme subtitle styles */
header h2 {
    font-size: 2em;
    /* Slightly smaller font size for theme */
    margin-top: 0;
    /* Remove default top margin */
    font-weight: 400;
    /* Normal weight for subtitle */
    color: #e71d7c;
    /* Black text for contrast */
    text-shadow: 2px 2px 5px rgba(177, 162, 162, 0.8);
    /* Soft text shadow for depth */
    -webkit-text-stroke: 0.4px #AC1754;
    /* Black stroke with specified width */


}


/* Responsive adjustments */
@media (max-width: 768px) {
    header {
        padding: 30px 15px;
        /* Adjust padding for smaller screens */
    }

    header h1 {
        font-size: 2.2em;
        /* Adjust main title size on smaller screens */
        background-color: white;
    }

    header h2 {
        font-size: 1.4em;
        /* Adjust theme subtitle size on smaller screens */
    }
}

@media (max-width: 480px) {
    header {
        padding: 20px 10px;
        /* Further adjust padding for very small screens */
    }

    header h1 {
        font-size: 1.8em;
        /* Reduce font size for main title on very small screens */
    }

    header h2 {
        font-size: 1.2em;
        /* Reduce font size for theme subtitle on very small screens */
    }
}

header h1,
h2,
h3 {
    font-family: 'M PLUS Rounded 1c', sans-serif;
}

/* Main container styles */
.container {
    display: flex;
    /* Use flexbox for layout */
    max-width: 1400px;
    /* Limit maximum width */
    margin: 0 auto;
    /* Center the container */
    padding: 5px;
    /* Padding around the container */
    /* background-color: #f0f4f8; Light background for contrast */
}

/* navigation Start */

/* Sidebar styles */
.sidebar {

    width: 330px;
    /* Fixed width for the sidebar */
    background: linear-gradient(30deg, #ff80a9, #ffb3b3);
    padding: 20px;
    /* Padding inside the sidebar */
    text-align: left;
    /* Left-aligns text in the sidebar */
    border-radius: 8px 0px 0px 8px;
    /* Slightly larger rounded corners */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    /* Softer shadow for a polished look */
    /* margin-right: 10px; Space between sidebar and main content */
}

/* Sidebar navigation list styles */
.sidebar nav ul {
    list-style-type: none;
    /* Removes bullet points from list */
    padding: 0;
    /* Removes default padding */
}

/* List item styles in the sidebar */
.sidebar nav ul li {
    margin-bottom: 10px;
    /* Space between list items */
    position: relative;
    /* Positioning for the separator line */
}

/* Link styles in the sidebar */
.sidebar nav ul li a {
    display: block;
    /* Makes link take full width */
    text-decoration: none;
    /* No underline on links */
    color: #8d0328;
    /* Black color for links */
    padding: 12px 20px;
    /* Padding for button-like appearance */
    border-radius: 2px;
    /* Rounded corners for links */
    transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
    /* Smooth transition for hover effects */
    font-size: 1.2em;
    /* Slightly larger font size for readability */
    font-weight: 600;
    -webkit-text-stroke: 0.01px #ffffff;
    /*White outline effect */
    border-bottom: 1px solid #F7418F;
}



/* Hover effect for sidebar links */
.sidebar nav ul li a:hover {
    background: linear-gradient(175deg, #ffb3b3, #ff80a9);
    color: #ffffff;
    /* Keep text color white on hover */
    transform: translateY(-2px) scale(1.02);
    /* Slight lift and scale effect on hover */
    box-shadow: 0 4px 20px #ffb3b3;
    /* Add shadow for depth on hover */
}

/* Add a subtle underline on hover */
.sidebar nav ul li a:hover::after {
    content: "";
    /* Empty content for pseudo-element */
    display: block;
    /* Block display for the underline */
    width: 100%;
    /* Full width */
    height: 2px;
    /* Height of the underline */
    background-color: #ffffff;
    /* Dark blue for the underline */
    position: absolute;
    /* Absolute positioning */
    left: 0;
    /* Align to the left */
    bottom: 0;
    /* Align to the bottom */
}

/* Button to toggle menu */
.menu-toggle {
    display: none;
    /* Initially hidden */
    background: #ec3c71;
    color: #ffffff;
    /* Button text color */
    border: solid 1px rgb(235, 87, 87);
    /* No border */
    padding: 10px 15px;
    /* Padding inside button */
    font-size: 1em;
    /* Font size for button */
    border-radius: 5px;
    /* Rounded corners */
    cursor: pointer;
    /* Pointer cursor on hover */
    margin-bottom: 15px;
    /* Space below the button */
    transition: background-color 0.3s ease, transform 0.3s ease;
    /* Smooth transition for hover */
}

/* Hover effect for the menu button */
.menu-toggle:hover {
    background: linear-gradient(100deg, #ffb3b3, #ff80a9);
    transform: scale(1.05);
    /* Slightly enlarge the button on hover */
}

/* Show the menu button in responsive view */
@media (max-width: 768px) {
    .menu-toggle {
        display: block;
        /* Show button on smaller screens */
        width: 100%;
    }

    .nav {
        display: none;
        /* Hide navigation by default */
    }

    .nav.active {
        display: block;
        /* Show navigation when active */
    }
}

/* Active link styles */
.sidebar nav ul li a.active {
    background: linear-gradient(100deg, #ff5e79, #ffb3b3);
    color: #ffffff;
    /* Active text color */
    font-weight: bold;
    /* Bold font for active link */
    border-left: 4px solid #ffffff;
    /* Optional left border for emphasis */
}

/* Navigation end */


/* Main Content Area styles */
main {
    flex-grow: 1;
    /* Allow main to take remaining space */
    color: black;
}


/* Main Poster Section Styles */
.poster {
    text-align: center;
    /* Center the poster image */
}

.poster img {
    max-width: 100%;
    /* Ensure the image is responsive */
    height: auto;
    cursor: pointer;
    /* Show pointer when hovering over the image */
    border-radius: 5px;
    /* Rounded corners */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    /* Subtle shadow */
    margin-top: 10px;
}

/* Sidebar Poster Thumbnail Section */
.download-poster {
    text-align: center;
    margin-top: 20px;
    padding: 10px;
    /* Padding around the section */
    transition: box-shadow 0.3s ease, transform 0.3s ease;
    border-radius: 8px;
    /* Optional: rounded corners */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    /* Subtle shadow */
    background: linear-gradient(200deg, #ff5e79, #ffb3b3);
}

/* Hover effect for the entire thumbnail section */
.download-poster:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    /* Increase shadow on hover */
    transform: translateY(-5px);
    /* Slight lift on hover */
    background: linear-gradient(200deg, #ff5e79, #ffb3b3);
}

/* Sidebar Poster Thumbnail Image */
.download-poster img {
    width: 100px;
    /* Set a fixed width that suits the sidebar */
    height: auto;
    /* Keep the aspect ratio */
    border-radius: 5px;
    /* Optional: rounded corners */
    margin: 10px 0;
    /* Add space around the image */
    transition: transform 0.3s ease;
    /* Smooth transition for image hover */
}

/* Hover effect for the image */
.download-poster:hover img {
    transform: scale(1.05);
    /* Slightly enlarge the image on hover */
}

/* Download Button within Sidebar */
.download-poster .pdf-download-button {
    display: inline-block;
    margin-top: 10px;
    padding: 5px 10px;
    /* Adjust padding for smaller size */
    font-size: 17px;
    /* Smaller font size for the button */
    background: #ec3c71;
    color: #ffffff;
    /* Button text color */
    border: solid 1px rgb(235, 87, 87);
    /* No border */
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

/* Hover effect for the download button */
.download-poster .pdf-download-button:hover {
    background-color: #ffffff;
    color: #ec3c71;
    transform: translateY(-2px);
    /* Lift effect */
}

/* Responsive adjustments for the main poster and sidebar thumbnail */
@media (max-width: 768px) {

    /* Main poster image adjusts to full width on smaller screens */
    .poster img {
        width: 100%;
    }

    /* Sidebar poster thumbnail image gets smaller */
    .download-poster img {
        width: 80px;
        /* Make the thumbnail smaller on smaller screens */
    }

    /* Adjust the size and padding of the download button on smaller screens */
    .download-poster .pdf-download-button {
        font-size: 10px;
        /* Smaller font size for the button */
        padding: 3px 8px;
        /* Reduced padding */
    }
}

/*--- Footer styles ----- */
footer {
    background: linear-gradient(2200deg, #ff80a9, #ffb3b3);
    /* Medium to light green gradient */
    padding: 30px 0;
    text-align: left;
    margin: 0;
}

/* Footer container */
.footer-container {
    display: flex;
    justify-content: space-between;
    /* Spread items to the sides */
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    /* Padding for smaller screens */
}

/* Footer info section */
.footer-info-left,
.footer-info-right {
    width: 45%;
    /* Each section takes up 45% of the width */
}

.footer-info p {
    line-height: 1.6;
    font-size: 1.1em;
    color: #ffffff;
    /* Light gray for paragraph text to complement the background */
}

/* Link styles in the footer */
.footer-info a {
    color: #FFD700;
    /* Gold for good contrast and accent */
    text-decoration: none;
    transition: color 0.3s ease;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
    /* Slight shadow for clarity */
}

.footer-info a:hover {
    color: #ffffff;
    /* White on hover for clearer visibility */
    text-decoration: underline;
}

/* Footer rights section */
.footer-rights {
    width: 100%;
    background-color: #f86493;
    /* Slightly darker blue for contrast with the gradient */
    color: #ffffff;
    padding: 15px 0;
    text-align: center;
    font-size: 1.1em;
    margin-top: 10px;
}

/* Responsive Styles */
@media (max-width: 768px) {
    .footer-container {
        flex-direction: column;
        align-items: center;
    }

    .footer-info-left,
    .footer-info-right {
        width: 100%;
        text-align: center;
        margin-bottom: 20px;
    }

    .footer-rights {
        font-size: 0.8em;
    }

    footer {
        padding: 20px 0;
    }
}

.footer-info-left h4,
.footer-info-right h4 {
    color: #8d193b;
    font-size: 1.4em;
}

.footer-info-left p,
.footer-info-right p {
    color: rgb(0, 0, 0);
}

.footer-info-left a,
.footer-info-right a {
    color: #000000;
    text-decoration: none;
}

.footer-info-left a:hover,
.footer-info-right a:hover {
    color: #ffffff;
    text-decoration: wavy;
}

/*--- End Footer styles ----- */

/* Media Queries for Responsiveness */
@media (max-width: 1024px) {

    /* Adjust sidebar width on smaller screens */
    .sidebar {
        width: 200px;
        /* Reduce width */
        margin-right: 15px;
        /* Adjust margin */
    }

    /* Adjust font size for links in the sidebar */
    .sidebar nav ul li a {
        font-size: 1em;
        /* Smaller font size */
        padding: 10px 15px;
        /* Adjust padding */
    }
}

@media (max-width: 768px) {

    /* Full width for smaller screens */
    .sidebar {
        width: 100%;
        /* Full width for sidebar */
        margin: 0 0 20px;
        /* Remove margin on right and add margin below */
    }

    /* Adjust main content area */
    .container {
        flex-direction: column;
        /* Stack sidebar and main vertically */
    }

    /* Adjust font size for links in the sidebar */
    .sidebar nav ul li a {
        font-size: 1em;
        /* Smaller font size */
        padding: 10px;
        /* Adjust padding */
    }
}

@media (max-width: 480px) {

    /* Further adjustments for extra small screens */
    header {
        padding: 15px;
        /* Smaller padding */
    }

    footer {
        padding: 8px;
        /* Smaller footer padding */
    }
}

/* Back to Top Button Styles */
.back-to-top {
    position: fixed;
    /* Fixed position */
    bottom: 20px;
    /* Distance from the bottom */
    right: 20px;
    /* Distance from the right */
    background-color: #fd5288;
    /* Background color */
    color: #ffffff;
    /* Text color */
    border: none;
    /* No border */
    border-radius: 5px;
    /* Rounded corners */
    padding: 10px 15px;
    /* Padding */
    font-size: 1em;
    /* Font size */
    font-weight: bolder;
    cursor: pointer;
    /* Pointer cursor on hover */
    display: none;
    /* Hidden by default */
    z-index: 1000;
    /* Ensure it is above other elements */
}

/* Show button when scrolled down */
.back-to-top.show {
    display: block;
    /* Show the button */
}

/* Optional: Hover effect */
.back-to-top:hover {
    background-color: #ffffff;
    /* Darker shade on hover */
    color: #fd5288;
}

/* お知らせ Styles */
/* Announcements Section Styles */
.announcements {
    margin: 40px 0;
    /* More space above and below the section */
    padding: 20px;
    /* Padding inside the section */
    background-color: #ffffff;
    /* White background for a clean look */
    border: 1px solid #e0e0e0;
    /* Light border */
    border-radius: 8px;
    /* Rounded corners for a modern feel */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    /* Slight shadow for depth */
}

.announcements h3 {
    font-size: 2em;
    /* Larger font size for the heading */
    margin-bottom: 20px;
    /* Space below the heading */
    color: #ec3c71;
    /* Darker text color */
    text-align: left;
    /* Center align the heading */
    font-family: 'Arial', sans-serif;
    /* Modern font */
    border-bottom: 3px solid #ec3c71;
    /* Strong blue underline */
    padding-bottom: 10px;
    /* Padding below the heading */
}

.news-scroll-box {
    max-height: 300px;
    /* Increased height for better viewing */
    overflow-y: auto;
    /* Enable vertical scrolling */
    padding: 15px;
    /* Padding inside the scrollable area */
    background-color: #f9f9f9;
    /* Light grey background for news items */
    border: 1px solid #d1e3ed;
    /* Subtle border around the scrollable box */
    border-radius: 5px;
    /* Slightly rounded corners */
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
    /* Light shadow */
}

.news-list {
    list-style: none;
    /* Remove default list style */
    padding: 0;
    /* Remove default padding */
    margin: 0;
    /* Remove default margin */
}

.news-list li {
    margin-bottom: 15px;
    /* Space between news items */
    padding: 15px;
    /* Padding inside each item */
    background-color: #ffffff;
    /* White background for each news item */
    border-left: 5px solid #ec3c71;
    /* Blue left border for emphasis */
    transition: transform 0.3s, background-color 0.3s;
    /* Smooth transition for effects */
    position: relative;
    /* Positioning for hover effect */
}

.news-list li:hover {
    background-color: #e1f5fe;
    /* Light blue background on hover */
    transform: translateY(-2px);
    /* Slight lift effect on hover */
}

.news-date {
    font-weight: bold;
    /* Bold for date */
    color: #ec3c71;
    /* Blue color for date */
    margin-right: 10px;
    /* Space between date and item */
}

.news-item {
    color: #333;
    /* Dark text color for news item */
    font-family: 'Arial', sans-serif;
    /* Consistent font */
    line-height: 1.6;
    /* Improved line height for readability */
}

/* Responsive Styles */
@media (max-width: 768px) {
    .announcements h3 {
        font-size: 1.6em;
        /* Adjust heading font size for smaller screens */
    }

    .news-scroll-box {
        max-height: 200px;
        /* Adjust max height for smaller screens */
    }

    .news-list li {
        padding: 10px;
        /* Less padding for smaller screens */
    }
}

/* ーーーーーーー aisatsu pageーーーーーーーーーー */
/* Greeting Section Styles */
.greeting-content {
    display: flex;
    align-items: center;
    margin-top: 30px;
    background-color: #f4f8fb8c;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* Greeting Photo Styles */
.greeting-photo {
    width: 240px;
    height: 240px;
    object-fit: contain;
    border-radius: 20px;
    margin-right: 20px;
}

/* Greeting Info Styles */
.greeting-info {
    text-align: left;
    flex-direction: column;
    flex: 1;
}

.greeting-info h3 {
    color: #ec3c71;
    margin: 0;
    font-size: 1.6rem;
}

.greeting-info h4 {
    color: #333;
    margin: 5px 0;
    font-size: 1.2rem;
}

.greeting-info h4.chairperson {
    color: #333;
    font-size: 1.6rem;
    font-weight: 700;
}

.greeting-text {
    margin-top: 20px;
    flex-basis: 100%;
    font-size: 1.2em;
}

/* Styles for specific h2 elements with the class greeting-title */
.greeting-title {
    font-size: 2rem;
    color: #cf1965;
    border-bottom: 2px solid #cf1965;
    text-align: left;
    margin: 20px 0;
    position: relative;
}

/* Responsive Styles */
@media (max-width: 768px) {
    .container {
        flex-direction: column;
    }
    .sidebar {
        width: 100%;
        margin-bottom: 20px;
    }
    main {
        width: 100%;
    }
    .greeting-content {
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
    }

    .greeting-photo {
        margin-bottom: 15px;
    }
}
main {
    flex: 1;
    /* Allow main content to grow */
    padding: 20px;
    /* Add padding for spacing */
    background-color: #ffffff;
    /* White background for the main area */
}

/* ーーーーーーー aisatsu pageーーーーーーーーーー */

/* ーーーーーーー gaiyou pageーーーーーーーーーー */

/* Main Styles */
main.gaiyou {
    padding: 30px;
    background: linear-gradient(to bottom right, #f0f8ffa6, #ffffff);
    /* Light blue gradient background */
    border-radius: 0px 10px 10px 0px;
    /* Rounded corners */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    /* Subtle shadow for depth */
    /* margin: 20px; Margin around the main content */
}

/* Overview Section Styles */
.overview {
    margin: 0;
    /* No margin for section */
}

/* Heading Style */
.overview h2 {
    font-size: 2rem;
    /* Smaller font size for a more subtle look */
    color: #cf1965;
    /* Professional blue color */
    border-bottom: 2px solid #cf1965;
    /* Underline for emphasis */
    text-align: left;
    /* Left-align the text */
    margin: 20px 0;
    /* Space above and below the heading */
    position: relative;
    /* Positioning for pseudo-elements */
}

/* Table Styles */
.details table {
    width: 100%;
    /* Full width for the table */
    border-collapse: collapse;
    /* Merge table borders */
    margin-top: 15px;
    /* Space above the table */
    overflow: hidden;
    /* Prevent overflow */
    border-radius: 5px;
    /* Rounded corners for table */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    /* Shadow effect */
}

/* Table Header Styles */
.details th {
    background: linear-gradient(200deg, #ff80a9, #ffb3b3);
    color: rgba(0, 0, 0, 0.548);
    /* Header text color */
    padding: 12px;
    /* Padding for header cells */
    text-align: center;
    /* Center-align header text */
    font-weight: bold;
    /* Bold text */
    border-bottom: 2px solid #f578b2;
    /* Bottom border for header */
    font-size: 1.1em;
}

/* Table Cell Styles */
.details td {
    border: 1px solid #bdc3c7;
    /* Border for table cells */
    padding: 12px;
    /* Padding for cells */
    line-height: 1.6;
    /* Improved readability */
    color: #443e40;
    /* Dark blue-gray text for better contrast */
}

/* Hover Effect for Table Rows */
.details tr:hover {
    background-color: #f0f8ff;
    /* Light blue background on hover */
}

/* Link Styles */
.details a {
    color: #ec3c71;
    /* Charming orange color */
    text-decoration: none;
    /* No underline */
}

.details a:hover {
    text-decoration: underline;
    /* Underline on hover */
    color: #ec3c71;
    /* Darker orange on hover */
}

/* Responsive Styles */
@media (max-width: 768px) {
    main.gaiyou {
        padding: 20px;
        /* Slightly reduce padding on smaller screens */
    }

    .overview h2 {
        font-size: 1.85rem;
        /* Adjust heading size on smaller screens */
    }

    .details table {
        font-size: 0.95em;
        /* Adjust font size for better fit */
    }

    /* Stack table rows vertically for mobile view */
    .details th,
    .details td {
        display: block;
        /* Make each cell a block */
        width: 100%;
        /* Full width for each cell */
    }

    .details tr {
        display: flex;
        /* Flex display for rows */
        flex-direction: column;
        /* Stack elements vertically */
        margin-bottom: 15px;
        /* Space between rows */
        border: 1px solid #bdc3c7;
        /* Border for the entire row */
        border-radius: 8px;
        /* Rounded corners for rows */
        overflow: hidden;
        /* Prevent overflow */
    }

    .details th {
        border-bottom: none;
        /* Remove bottom border in mobile view */
        background-color: #4682b4;
        /* Keep header background */
        color: white;
        /* Keep header text color */
        padding: 8px;
        /* Adjust padding */
        text-align: center;
        /* Center-align header text in mobile view */
    }

    .details td {
        border-top: none;
        /* Remove top border for first cell */
    }
}

/* ーーーーーーー gaiyou pageーーーーーーーーーー */
/* ーーーーーーー sankareg pageーーーーーーーーーー */
/* Section Styles */
.registration-info .registration-fee,
.registration-time {
    margin-bottom: 20px;
    /* Space between sections */
    padding: 15px;
    /* Padding inside each section */
    background-color: #fff;
    /* White background for sections */
    border-radius: 8px;
    /* Rounded corners */
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
    /* Light shadow */
}

/* Section Headings */
.registration-info h3,
.registration-fee h3,
.registration-time h3 {
    font-size: 1.5rem;
    /* Font size for headings */
    margin-bottom: 10px;
    /* Space below headings */
    color: #ec3c71;
    /* Heading color */
}

.registration-info h4,
.registration-fee h4,
.registration-time h4 {
    font-size: 1.2rem;
    /* Font size for headings */
    margin-bottom: 10px;
    /* Space below headings */
    color: #ec3c71;
    /* Heading color */
}

/* Paragraph Styles */
.registration-info p,
.registration-fee p,
.registration-time p {
    font-size: 1rem;
    /* Font size for paragraphs */
    line-height: 1.5;
    /* Line height for readability */
    margin-bottom: 10px;
    /* Space between paragraphs */
}

/* Strong Text */
.registration-fee p strong {
    font-size: 1.2rem;
    /* Larger font size for important text */
    color: #f74479;
    /* Color for strong text */
}

/* Download Link */
.download-link {
    display: inline-block;
    /* Block for better spacing */
    padding: 10px 15px;
    /* Padding for the button */
    background: #ec3c71;
    color: #ffffff;
    /* Button text color */
    border: solid 1px rgb(235, 87, 87);
    /* No border */
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s;
    /* Transition for hover effect */
}

.download-link:hover {
    background-color: #ffffff;
    color: #ec3c71;
    transform: translateY(-2px);
    /* Lift effect */
}

/* Contact Section */
.registration-fee a {
    color: #ec3c71;
    /* Link color */
    text-decoration: underline;
    /* Underline links */
}

/* Responsive Styles */
@media (max-width: 768px) {

    .registration-info h3,
    .registration-fee h3 {
        font-size: 1.2rem;
        /* Smaller section headings */
    }

    .registration-info p,
    .registration-fee p {
        font-size: 0.9rem;
        /* Smaller paragraph text */
    }
}

/* List Styles in Registration Fee Section */
.registration-info ul {
    list-style-type: decimal;
    /* Use disc bullet points */
    padding-left: 20px;
    /* Space from the left for bullets */
}

.registration-info ul li {
    font-size: 1rem;
    /* Font size for list items */
    line-height: 1.5;
    /* Line height for readability */
    margin-bottom: 10px;
    /* Space between list items */
    color: #333;
    /* Standard text color */
}

.registration-info a {
    color: #ffffff;
    /* Standard text color */
    text-decoration: none;
    font-weight: 600;
}

.registration-info a:hover {
    background-color: #ffffff;
    color: #ec3c71;

}


/* Strong text inside list items */
.registration-info ul li strong {
    color: #ec3c71;
    /* Color for strong text */
}

/* Optional: Add hover effect on list items */
.registration-info ul li:hover {
    background-color: #f0f8ff;
    /* Light background on hover */
    border-radius: 4px;
    /* Slightly rounded corners on hover */
    transition: background-color 0.3s;
    /* Smooth transition */
}

/* \\\\\\\\\\\\\\\\\\\\\\\\ */
/* List Styles in Registration Fee Section */
.registration-fee ul {
    list-style-type: decimal;
    /* Use disc bullet points */
    padding-left: 20px;
    /* Space from the left for bullets */
}

.registration-fee ul li {
    font-size: 1rem;
    /* Font size for list items */
    line-height: 1.5;
    /* Line height for readability */
    margin-bottom: 10px;
    /* Space between list items */
    color: #333;
    /* Standard text color */
}

/* Strong text inside list items */
.registration-fee ul li strong {
    color: #ec3c71;
    /* Color for strong text */
}

/* Optional: Add hover effect on list items */
.registration-fee ul li:hover {
    background-color: #f0f8ff;
    /* Light background on hover */
    border-radius: 4px;
    /* Slightly rounded corners on hover */
    transition: background-color 0.3s;
    /* Smooth transition */
}

/* Strikethrough style */
.strikethrough {
    position: relative;
    /* Position for the pseudo-element */
    display: inline-block;
    /* Allow width for the pseudo-element */
}

.strikethrough::before {
    content: "";
    /* Empty content for the line */
    position: absolute;
    /* Absolute positioning */
    left: 0;
    /* Align to the left */
    top: 50%;
    /* Center vertically */
    width: 100%;
    /* Full width */
    height: 2px;
    /* Line thickness */
    background-color: #2DAA9E;
    /* Red color for the line */
    transform: translateY(-50%);
    /* Adjust position to center */
}

/* ーーーーーーー sankareg pageーーーーーーーーーー */
/* ーーーーーーー program pageーーーーーーーーーー */
.gaiyou .program-buttons {
    display: flex;
    /* Use flexbox for alignment */
    flex-direction: column;
    /* Stack buttons vertically */
    align-items: center;
    /* Center the buttons */
    margin-top: 20px;
    /* Space above the buttons */
    text-align: center;
}

.gaiyou .program-button {
    background: #ec3c71;
    color: #ffffff;
    /* Button text color */
    border: solid 1px rgb(235, 87, 87);
    /* No border */
    text-decoration: none;
    padding: 15px 30px;
    /* Padding for larger buttons */
    width: 250px;
    /* Set a fixed width for buttons */
    margin: 10px 0;
    /* Space between buttons */
    border-radius: 8px;
    /* Rounded corners */
    font-size: 1.4em;
    /* Increased font size */
    font-weight: bold;
    /* Make the text bold */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    /* Subtle shadow for depth */
    transition: background-color 0.3s, transform 0.2s;
    /* Smooth transitions */
}

.gaiyou .program-button:hover {
    background-color: #ffffff;
    color: #ec3c71;
    transform: translateY(-2px);
    /* Lift effect */
}

/* Responsive Styles */
@media (max-width: 768px) {
    .program-button {
        padding: 12px 25px;
        /* Adjust padding for smaller screens */
        font-size: 1.2em;
        /* Slightly decrease font size */
        width: 80%;
        /* Use relative width on smaller screens */
    }
}


/* ーーーーーーー program pageーーーーーーーーーー */
/* ーーーーーーー kaijouannnai pageーーーーーーーーーー */

/* Address section */
.venue-address h3 {
    font-size: 1.5em;
    color: #ec3c71;
    margin-bottom: 20px;
    font-weight: bold;
}

.venue-address p {
    font-size: 1.2em;
    line-height: 1.8;
    color: #333;
    padding: 15px;
    transition: transform 0.3s ease-in-out;
    margin-bottom: 10px;
}

.venue-address p:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

/* Link styling in address section */
.venue-address a {
    display: inline-block;
    font-size: 1.1em;
    background: #ec3c71;
    color: #ffffff;
    border: solid 1px rgb(235, 87, 87);
    text-decoration: none;
    padding: 10px 15px;
    border-radius: 8px;
    transition: all 0.3s ease;
    margin-bottom: 20px;
    margin-top: 10px;
    width: 30%;
    text-align: center;
}

.venue-address a:hover {
    background-color: #ffffff;
    color: #ec3c71;
    transform: translateY(-2px);
    /* Lift effect */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* Map section styling */
.venue-map {
    margin-bottom: 40px;
}

.venue-map h3 {
    font-size: 1.5em;
    color: #ec3c71;
    margin-bottom: 20px;
    font-weight: bold;
}

.map-image {
    width: 100%;
    max-width: 700px;
    height: auto;
    display: block;
    margin: 0 auto;
    border: 4px solid #ec3c71;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.3s ease-in-out, transform 0.3s ease-in-out;
}

.map-image:hover {
    transform: scale(1.02);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

/* Notes section styling */
.venue-notes {
    margin-bottom: 50px;
}

.venue-notes h3 {
    font-size: 1.5em;
    color: #2a5ca9;
    margin-bottom: 20px;
    font-weight: bold;
}

.venue-notes p {
    font-size: 1.2em;
    line-height: 1.8;
    margin-bottom: 20px;
    color: #333;
}

.venue-notes ul {
    list-style: none;
    padding-left: 0;
    font-size: 1.2em;
    color: #333;
}

.venue-notes li {
    background: #f7fafc;
    margin-bottom: 15px;
    padding: 10px 20px;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    position: relative;
    line-height: 1.8;
    transition: all 0.3s ease-in-out;
}

.venue-notes li:hover {
    background: #e8f5ff;
    transform: translateX(10px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

/* Responsive design */
@media (max-width: 768px) {

    .venue-address p,
    .venue-notes li {
        font-size: 1em;
    }

    .map-image {
        max-width: 100%;
    }

    .venue-address a {
    font-size: 1em;
    padding: 8px 12px;
    width: 80%; /* make it wider for visibility */
    margin-left: auto;
    margin-right: auto;
    display: block;
  }
}

/* ーーーーーーー kaijouannnai pageーーーーーーーーーー */
/* ーーーーーーー Link pageーーーーーーーーーー */
/* Link item styling */
.link-item {
    margin-bottom: 20px;
    /* Space between link items */
    font-size: 1.2em;
    /* Font size for link items */
    position: relative;
    /* Positioning for pseudo-element */
    padding: 15px;
    /* Padding for each link item */
    border-radius: 8px;
    /* Rounded corners */
    background-color: #ffffff;
    /* White background for items */
    overflow: hidden;
    /* Prevent overflow for pseudo-element */
    transition: background-color 0.3s ease, color 0.3s ease;
    /* Smooth transition for background and color */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    /* Soft shadow */
    text-align: left;
    /* Align text to the left */
    cursor: pointer;
    /* Pointer cursor on hover */
}

/* Text and link styles */
.link-item span {
    font-weight: bold;
    /* Make the company name bold */
    color: #333;
    /* Text color for the company name */
}

/* Link styling */
.link-item a {
    color: #ec3c71;
    /* Link color */
    text-decoration: none;
    /* Remove underline */
    transition: color 0.3s;
    /* Smooth color transition */
}

/* Hover effect for the link */
.link-item:hover {
    background: linear-gradient(200deg, #F72C5B, #FF748B);
}

.link-item:hover span {
    color: #000000;
    /* Change text color to a specific color (gold) on hover */
}

.link-item:hover a {
    color: #ffffff;
    /* Change link color to a specific color (gold) on hover */
}

/* Responsive design */
@media (max-width: 768px) {
    .greeting-title {
        font-size: 2em;
        /* Adjust title size for smaller screens */
    }

    .link-item {
        font-size: 1em;
        /* Adjust font size for link items */
    }
}


/* ーーーーーーー Link pageーーーーーーーーーー */
/* Button styling */
.program-button {
    display: inline-block;
    /* Inline block for button */
    padding: 15px 25px;
    /* Padding for button */
    margin: 20px auto;
    /* Center margin for button */
    font-size: 1.3em;
    /* Font size for button */
    background-color: #007BFF;
    /* Button color */
    color: white;
    /* Text color */
    text-decoration: none;
    /* Remove underline */
    border-radius: 5px;
    /* Rounded corners */
    text-align: center;
    /* Center align text */
    transition: background-color 0.3s;
    /* Smooth transition */
    box-shadow: 0 2px 4px rgba(0, 123, 255, 0.3);
    /* Button shadow */
}

/* Button hover effect */
.program-button:hover {
    background-color: #ffffff;
    /* Darker shade on hover */
    color: #007BFF;
}

/* Center the button */
.kekka {
    display: flex;
    /* Use flexbox */
    justify-content: center;
    /* Center the button horizontally */
    align-items: center;
    /* Center the button vertically */
}


/* Notice section styling */
.notice {
    margin: 20px 0;
    /* Margin for notice */
    padding: 20px;
    /* Padding for notice */
    background-color: #ffffff;
    /* White background */
    border-radius: 8px;
    /* Rounded corners */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    /* Enhanced shadow for depth */
}

.endai-sec2 h3 {
    color: #ec3c71;
    /* Professional blue color */
    margin: 0;
    /* Remove default margin */
    font-size: 1.6rem;
    /* Font size for the title */
}

/* Section styling */
.endai-sec1,
.endai-sec2 {
    margin: 20px 0;
    /* Margin for sections */
    padding: 20px;
    /* Padding for sections */
    background-color: #ffffff;
    /* White background */
    border-radius: 8px;
    /* Rounded corners */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    /* Enhanced shadow for depth */
}

/* Table styling */
.category-table {
    width: 100%;
    /* Full width */
    border-collapse: collapse;
    /* Collapse borders */
    margin-top: 10px;
    /* Margin above table */
}

.category-table th,
.category-table td {
    padding: 10px;
    /* Padding for cells */
    text-align: left;
    /* Align text to left */
    border: 1px solid #ddd;
    /* Border for cells */
}

.category-table th {
    background-color: #007BFF;
    /* Header background color */
    color: white;
    /* Header text color */
}

/* Responsive design */
@media (max-width: 768px) {
    .program-button {
        font-size: 1em;
        /* Adjust button font size */
        padding: 10px 15px;
        /* Adjust padding */
    }

    .notice,
    .endai-sec1,
    .endai-sec2 {
        padding: 15px;
        /* Adjust padding for sections */
    }

    .category-table th,
    .category-table td {
        font-size: 0.9em;
        /* Adjust font size for table cells */
        padding: 8px;
        /* Adjust padding for table cells */
    }
}


/* Responsive styles */
@media (max-width: 768px) {
    .greek-table {
        display: block;
        /* Allow block display for the table */
        overflow-x: auto;
        /* Enable horizontal scrolling */
        white-space: nowrap;
        /* Prevent line breaks */
    }

    .greek-table th,
    .greek-table td {
        display: block;
        /* Change to block layout */
        text-align: left;
        /* Align text to the left for better readability */
    }

    .greek-table tr {
        display: flex;
        /* Use flexbox for row items */
        flex-direction: column;
        /* Stack items vertically */
        margin-bottom: 15px;
        /* Space between rows */
    }

    .greek-table th {
        position: relative;
        /* Position relative for label */
        padding-left: 50%;
        /* Space for label */
    }

    .greek-table th::before {
        position: absolute;
        /* Position label before header */
        left: 10px;
        /* Adjust position */
        white-space: nowrap;
        /* Prevent line breaks */
        font-weight: bold;
        /* Make bold */
    }

    /* Apply alternating background for odd rows */
    .greek-table tr:nth-child(odd) {
        background-color: #f9f9f9;
        /* Light gray for odd rows */
    }
}

.endai-sec2 .houhou {
    list-style-type: none;
    /* Remove default bullet points */
    padding: 0;
    /* Remove default padding */
    margin: 20px 0;
    /* Add margin above and below the list */
    font-family: Arial, sans-serif;
    /* Clean sans-serif font */
    display: flex;
    /* Flexbox for responsive layout */
    flex-direction: column;
    /* Column layout for the list items */
}

.endai-sec2 .houhou li {
    list-style-type: circle;
    background-color: #ffffff;
    /* Light gray background for list items */
    border: 1px solid #ffffff;
    /* Light border around items */
    border-radius: 5px;
    /* Rounded corners */
    padding: 5px;
    /* Padding inside list items */
    margin-bottom: 10px;
    /* Space between items */
    transition: background-color 0.3s, transform 0.2s;
    /* Smooth transitions */
}

/* Hover effect */
.endai-sec2 .houhou li:hover {
    background-color: #007bff;
    /* Change background color on hover */
    color: white;
    /* Change text color to white */
    transform: scale(1.02);
    /* Slightly enlarge on hover */
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .houhou {
        flex-direction: column;
        /* Stack items vertically on smaller screens */
    }

    .houhou li {
        font-size: 16px;
        /* Adjust font size for readability */
        padding: 12px;
        /* Adjust padding */
    }
}

@media (max-width: 480px) {
    .houhou li {
        font-size: 14px;
        /* Smaller text for mobile */
        padding: 10px;
        /* Further adjust padding */
        margin-bottom: 8px;
        /* Reduce spacing between items */
    }
}

.styled-table {
    width: 100%;
    /* Full width */
    border-collapse: collapse;
    /* Collapse borders */
    margin: 20px 0;
    /* Margin above and below the table */
}

.styled-table th,
.styled-table td {
    border: 1px solid #ddd;
    /* Light gray border */
    padding: 12px;
    /* Padding inside cells */
    text-align: center;
    /* Center text */
}

.styled-table th {
    background-color: #007BFF;
    /* Header background color */
    color: white;
    /* Header text color */
}

.styled-table tr:nth-child(even) {
    background-color: #f2f2f2;
    /* Light gray for even rows */
}

.styled-table tr:hover {
    background-color: #ddd;
    /* Darker gray on hover */
}

/* Responsive design */
@media (max-width: 768px) {
    .styled-table {
        display: block;
        /* Allow block display for the table */
        overflow-x: auto;
        /* Enable horizontal scrolling */
        white-space: nowrap;
        /* Prevent line breaks */
    }

    .styled-table th,
    .styled-table td {
        display: block;
        /* Change to block layout */
        text-align: left;
        /* Align text to the left for better readability */
    }

    .styled-table tr {
        display: flex;
        /* Use flexbox for row items */
        flex-direction: column;
        /* Stack items vertically */
        margin-bottom: 15px;
        /* Space between rows */
    }

    .styled-table th {
        position: relative;
        /* Position relative for label */
        padding-left: 50%;
        /* Space for label */
    }

    .styled-table th::before {
        position: absolute;
        /* Position label before header */
        left: 10px;
        /* Adjust position */
        white-space: nowrap;
        /* Prevent line breaks */
        font-weight: bold;
        /* Make bold */
    }

    /* Apply alternating background for odd rows */
    .styled-table tr:nth-child(odd) {
        background-color: #f9f9f9;
        /* Light gray for odd rows */
    }
}

.endai-button1,
.endai-button2 {
    display: inline-block;
    /* Inline block for button */
    padding: 15px 25px;
    /* Padding for button */
    font-size: 1.2em;
    /* Font size for button */
    background: #ec3c71;
    color: #ffffff;
    /* Button text color */
    border: solid 1px rgb(235, 87, 87);
    /* No border */
    text-decoration: none;
    border-radius: 5px;
    /* Rounded corners */
    text-align: center;
    /* Center align text */
    transition: background-color 0.3s;
    /* Smooth transition */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    /* Button shadow */
    margin-bottom: 15px;
}

/* Hover effect */
.endai-button1:hover,
.endai-button2:hover {
    background-color: #ffffff;
    color: #ec3c71;
    transform: translateY(-2px);
    /* Lift effect */
}

/* ーーーーーーー endai Page ーーーーーーーーーー */

/* sponsor page  */

.greet01 {
  background: #fff;
  padding: 30px;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.06);
  color: #333;
}

.greet01 p {
  margin-bottom: 1.5em;
  font-size: 1.05rem;
}

.nmbr .midashi1 {
  font-weight: bold;
  font-size: 1.3rem;
  margin: 20px 0 10px;
}

/* --- BUTTON --- */
.dnbt {
  display: inline-block;
  padding: 15px 25px;
  font-size: 1.2rem;
  background: #E8EEAE;
  color: #000000;
  border: solid 1px #CCDB2A;
  border-radius: 5px;
  text-align: center;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  margin-top: 10px;
  font-weight:600;
  
}

.dnbt a {
  color: #000000;
  text-decoration: none;
  display: block;
}

.button-wrap {
  display: flex;
  justify-content: left;
  margin-top: 20px;
}
/* --- List --- */
.nmbr {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.nmbr > li {
  margin-bottom: 30px;
}

/* --- Table Container --- */
.infotab {
  margin-top: 25px;
}

.infotab > p {
  font-weight: 700;
  font-size: 1.1rem;
  margin-bottom: 10px;
  color: #ec3c71;
}

/* --- Tables --- */
.sptab {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
  /* table-layout: fixed; */
}

.sptab th,
.sptab td {
  border: 1px solid #ccc;
  padding: 12px 10px;
  text-align: center;
  /* overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap; */
}

.sptab th {
  background-color: #fef0f4;
  color: #ec3c71;
  font-weight: 600;
}

.sptab td {
  background-color: #fff;
}

/* --- Contact Heading --- */
.midashi {
  display: inline-block;
  margin-top: 20px;
  font-weight: bold;
  font-size: 1.05rem;
  color: #2a2a2a;
}

/* ========== RESPONSIVE BREAKPOINTS ========== */
@media (max-width: 1024px) {
  main.gaiyou {
    padding: 30px 16px;
  }
}

@media (max-width: 768px) {
  .greeting-title {
    font-size: 1.8rem;
  }

  .dnbt {
    width: 100%;
    padding: 12px;
  }

  .sptab th,
  .sptab td {
    font-size: 0.85rem;
    padding: 10px 6px;
  }
}

@media (max-width: 480px) {
  .greet01 {
    padding: 20px;
  }

  .greeting-title {
    font-size: 1.5rem;
  }

  .sptab {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }
}
/* sponsor page  */