@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&family=Noto+Serif+JP:wght@400;700&display=swap');

body {
    margin: 0;
    padding: 0;
    font-family: 'Noto Sans JP', sans-serif; /* Base font set to Noto Sans JP */
    color: #333; /* A common default text color */
    background-color: #fff; /* Default white background */
}

h1, h2, h3, h4, h5, h6, p, ul, li {
    margin: 0;
    padding: 0;
}

a {
    text-decoration: none;
    color: inherit;
}

img {
    max-width: 100%;
    height: auto;
    display: block; /* Removes extra space below images */
}

/* More specific styles will be added below */

/* Header Styles */
header {
    text-align: center;
    padding: 0; /* Remove padding as the image will dictate size */
    line-height: 0; /* Remove extra space if image is inline-block */
}

.header-top-image {
    width: 100%;
    max-width: 900px; /* Align with other content max-width */
    height: auto;
    margin: 0 auto; /* Center the image */
}

/* Removing styles related to the previous complex header */
.header-decoration-top,
.header-main-content,
.header-top-banner,
header h1,
.title-with-images,
.header-miniature-img,
header h2,
.header-choice-banner,
.header-images,
.header-banner,
.header-choice,
.top-visual-image {
    display: none; /* Hide all previous header elements and their specific styles */
}

/* Briefing CTA Section Styles */
.briefing-cta {
    background: linear-gradient(to bottom, #e0f7fa 0%, #f8fcff 100%); /* Light blue gradient */
    padding: 30px 20px;
    text-align: center;
    margin: 30px auto;
    max-width: 700px; /* Adjusted max-width */
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.briefing-title {
    font-family: 'Noto Serif JP', serif;
    font-size: 2.2em; /* Large title */
    font-weight: bold;
    color: #222; /* Darker text for contrast */
    margin-bottom: 10px;
}

.briefing-title .title-highlight-blue {
    background-color: #cceeff; /* Light blue highlight */
    padding: 0 8px;
    border-radius: 4px;
}

.briefing-subtitle {
    font-size: 1.3em;
    color: #333;
    margin-bottom: 8px;
    font-weight: bold;
}

.briefing-note {
    font-size: 0.9em;
    color: #555;
    margin-bottom: 25px;
}

.briefing-button {
    background-color: #D32F2F; /* Red button */
    color: white;
    padding: 15px 35px;
    font-size: 1.3em;
    font-weight: bold;
    border-radius: 8px; /* Slightly less rounded corners */
    text-decoration: none;
    display: inline-block;
    transition: background-color 0.3s ease;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.briefing-button:hover {
    background-color: #B71C1C; /* Darker red on hover */
}

/* LINE CTA Section Styles */
.line-cta {
    background: #f0fff0; /* Light green background */
    padding: 30px 20px;
    text-align: center;
    margin: 30px auto;
    max-width: 700px;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    border: 2px solid #2E8B57; /* SeaGreen border */
}

.line-title {
    font-family: 'Noto Serif JP', serif;
    font-size: 2.0em;
    font-weight: bold;
    color: #222;
    margin-bottom: 10px;
    line-height: 1.4;
}

.line-title .title-highlight-green {
    background-color: #98fb98; /* PaleGreen highlight */
    padding: 0 8px;
    border-radius: 4px;
}

.line-subtitle {
    font-size: 1.2em;
    color: #333;
    margin-bottom: 25px;
    font-weight: bold;
    line-height: 1.5;
}

.line-button {
    background-color: #00B900; /* LINE green */
    color: white;
    padding: 15px 35px;
    font-size: 1.3em;
    font-weight: bold;
    border-radius: 8px;
    text-decoration: none;
    display: inline-block;
    transition: background-color 0.3s ease;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.line-button:hover {
    background-color: #008c00; /* Darker LINE green on hover */
}


/* Remove old .free-offer styles if they are no longer used or conflict */
/* For now, I will comment them out. If confirmed they are fully replaced, they can be deleted.
.free-offer, .tag-now, .offer-title, .offer-image, .offer-subtitle,
.offer-main-text, .offer-present, .offer-note, .line-button {
    display: none;
}
*/
/* If .final-offer was a variant of .free-offer, its specific styles might also need adjustment or removal.
   The new .final-cta class can be used for specific styling of the last CTA if needed. */
.final-cta {
    margin-bottom: 40px; /* Ensure space before footer, similar to .final-offer */
}

/* What is Artist Section Styles */
.what-is-artist {
    background-color: #fffafc; /* Another very light pink - placeholder */
    padding: 30px 20px;
    text-align: center;
    margin: 20px auto;
    max-width: 800px; /* Adjust as needed */
    border-radius: 10px;
    border: 1px solid #ffe4e1; /* Lighter pink border - placeholder */
}

.what-is-artist h3 {
    font-family: 'Noto Serif JP', serif; /* Apply Serif font */
    font-size: 1.8em;
    color: #ff69b4; /* Pink - placeholder */
    font-weight: bold;
    margin-bottom: 20px;
}

.what-is-artist p {
    font-size: 1.1em;
    line-height: 1.6;
    color: #333;
    margin-bottom: 15px;
}

.what-is-artist .highlight {
    color: #ff69b4; /* Pink - placeholder */
    font-weight: bold;
}

.what-is-artist img {
    max-width: 400px; /* Adjust as needed */
    margin: 10px auto 0 auto; /* Space above the image */
    border-radius: 8px;
}

/* What is Aframe Section Styles */
.what-is-aframe {
    background-color: #fffafc; /* Consistent light pink - placeholder */
    padding: 30px 20px;
    text-align: center;
    margin: 20px auto;
    max-width: 800px; /* Adjust as needed */
    border-radius: 10px;
    border: 1px solid #ffe4e1; /* Lighter pink border - placeholder */
}

.what-is-aframe h3 {
    font-family: 'Noto Serif JP', serif; /* Apply Serif font */
    font-size: 1.8em;
    color: #ff69b4; /* Pink - placeholder */
    font-weight: bold;
    margin-bottom: 20px;
    line-height: 1.4;
}

.what-is-aframe p {
    font-size: 1.1em;
    line-height: 1.7; /* Slightly more line height for readability */
    color: #333;
    margin-bottom: 15px;
}

.what-is-aframe .highlight-pink {
    display: block; /* Make it a block to take full width for centering */
    font-size: 1.4em;
    color: #ff1493; /* Brighter pink - placeholder */
    font-weight: bold;
    margin: 10px 0;
}

.what-is-aframe .highlight { /* For the "国内最小の手の平サイズ" part */
    color: #ff69b4; /* Pink - placeholder */
    font-weight: bold;
}

.what-is-aframe img {
    max-width: 500px; /* Adjust as needed, image seems wider */
    margin: 10px auto 0 auto;
    border-radius: 8px;
}

/* Media Coverage Section Styles */
.media-coverage {
    background-color: #fdf5e6; /* Light beige/off-white - placeholder */
    /* background-image: url('assets/images/subtle_pattern.png'); /* If there's a pattern */
    padding: 40px 20px;
    text-align: center;
    margin: 20px 0; /* Full width section */
}

.media-coverage h4 {
    font-family: 'Noto Serif JP', serif; /* Apply Serif font */
    font-size: 2em;
    color: #333;
    font-weight: bold;
    margin-bottom: 10px;
    line-height: 1.3;
}

.media-coverage h4 span { /* For "マスメディアで紹介" if styled differently, e.g. pink */
    color: #ff69b4; /* Pink - placeholder */
}

.media-excerpt {
    font-size: 1em;
    color: #555;
    margin-bottom: 30px;
}

.media-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Responsive grid */
    gap: 20px;
    max-width: 900px; /* Limit width of the grid */
    margin: 0 auto;
}

.media-item {
    background-color: #fff; /* White background for each item */
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    text-align: center;
}

.media-item img {
    max-width: 100%;
    height: auto;
    margin-bottom: 10px;
    border-radius: 4px; /* Slight rounding for images if desired */
}

.media-item p {
    font-size: 0.9em;
    color: #333;
    line-height: 1.4;
}

/* Course Charms Section Styles */
.course-charms {
    padding: 30px 20px;
    text-align: center;
    margin: 20px auto;
    max-width: 850px; /* Adjust as needed */
}

.course-charms h5 {
    font-family: 'Noto Serif JP', serif; /* Apply Serif font */
    font-size: 1.8em;
    color: #333;
    font-weight: bold;
    margin-bottom: 30px;
    line-height: 1.4;
}

.course-charms .large-pink {
    font-size: 1.5em; /* Relative to parent h5 */
    color: #ff69b4; /* Pink - placeholder */
}

.charm-item {
    display: flex;
    align-items: flex-start; /* Align items to the top */
    background-color: #fff; /* White background */
    border: 2px solid #ffd700; /* Gold/Yellow border */
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 20px;
    text-align: left; /* Align text to left within the item */
}

.charm-number img {
    max-width: 100px; /* Adjust as needed */
    margin-right: 20px;
}

.charm-text h6 {
    font-size: 1.5em;
    color: #ff69b4; /* Pink - placeholder */
    font-weight: bold;
    margin-bottom: 10px;
    line-height: 1.3;
}

.charm-text p {
    font-size: 1em;
    color: #333;
    line-height: 1.6;
}

.highlight-yellow-text {
    background-color: #fffacd; /* Light yellow - placeholder, same as .highlight-yellow */
    padding: 1px 3px;
    border-radius: 3px;
    font-weight: bold; /* Often highlighted text is also bold */
}

/* Earning Reasons Section Styles */
.earning-reasons {
    padding: 40px 20px; /* Increased padding */
    margin: 30px auto;
    max-width: 800px; /* Adjusted max-width */
    text-align: center; /* Ensure section content tends to center */
}

.earning-reasons h5 {
    font-family: 'Noto Serif JP', serif;
    font-size: 1.6em; /* Adjusted base size */
    color: #333;
    font-weight: bold;
    margin-bottom: 10px; /* Space before intro text */
    line-height: 1.5;
    text-align: center;
}

.earning-reasons h5 .reason-title-highlight {
    display: block; /* Make it take its own line */
    font-size: 1.9em; /* Larger for emphasis, relative to h5's new base */
    color: #E91E63; /* Vibrant Pink */
    margin-top: 5px; /* Space from "思い出アフレームの職人が" */
}

.earning-reasons .intro-text {
    font-size: 1em;
    color: #555;
    margin-bottom: 40px; /* More space before the first item */
    line-height: 1.7;
    text-align: center;
    max-width: 650px; /* Constrain intro text width */
    margin-left: auto;
    margin-right: auto;
}

.reason-item {
    display: flex;
    text-align: left;
    margin-bottom: 30px;
    padding-bottom: 30px; /* Space for border */
    border-bottom: 1px solid #eee; /* Light grey border for separation */
    gap: 25px; /* Space between image and content */
}

.reason-item:last-child {
    border-bottom: none; /* No border for the last item */
    margin-bottom: 0;
    padding-bottom: 0;
}

.reason-image {
    flex-shrink: 0;
}

.reason-image img {
    width: 100%; /* Make image responsive within its container */
    max-width: 200px; /* Max width for the image */
    height: auto;
    border-radius: 8px;
}

.reason-content {
    flex-grow: 1;
}

.reason-content h6 {
    font-weight: bold;
    margin-bottom: 10px;
    line-height: 1.4;
}

.reason-content .reason-subtitle {
    display: block;
    font-size: 1.3em; /* Increased font size */
    color: #E91E63; /* Vibrant Pink */
    margin-bottom: 5px;
}

.reason-content .reason-main-title {
    display: block;
    font-size: 1.7em; /* Increased font size */
    color: #E91E63; /* Vibrant Pink */
}

.reason-content p {
    font-size: 1em;
    color: #333;
    line-height: 1.8; /* Increased line height for readability */
}

.reason-item .highlight-yellow { /* Re-confirming style, already present */
    background-color: #fffacd;
    padding: 2px 5px;
    border-radius: 3px;
}

/* Horie YouTube Section Styles */
.horie-youtube {
    background-color: #e9f5f8; /* Light blue-grey background - placeholder */
    padding: 40px 20px;
    text-align: center;
    margin: 20px 0; /* Full width section */
}

.horie-youtube h5 {
    font-family: 'Noto Serif JP', serif; /* Apply Serif font */
    font-size: 1.8em;
    color: #333; /* Darker text for contrast on light blue */
    font-weight: bold;
    margin-bottom: 15px;
    line-height: 1.4;
}

.horie-youtube p {
    font-size: 1em;
    color: #444; /* Slightly darker grey */
    margin-bottom: 25px;
    line-height: 1.6;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.youtube-video {
    max-width: 600px; /* Adjust as needed */
    margin: 0 auto;
    position: relative; /* For potential play button overlay if not in image */
}

.youtube-video img {
    width: 100%;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

/* Lifestyle Benefits Section Styles */
.lifestyle-benefits {
    background-color: #e0f7fa; /* Light blue, similar to header banner - placeholder */
    padding: 40px 20px;
    text-align: center;
    margin: 20px 0; /* Full width section */
}

.lifestyle-benefits h5 {
    font-family: 'Noto Serif JP', serif; /* Apply Serif font */
    font-size: 1.8em;
    color: #333;
    font-weight: bold;
    margin-bottom: 25px;
    line-height: 1.4;
}

.lifestyle-benefits img { /* The smiling woman image */
    max-width: 350px; /* Adjust as needed */
    margin: 0 auto 25px auto;
    border-radius: 8px;
}

.lifestyle-benefits ul {
    list-style: none; /* Remove default bullets */
    padding: 0;
    max-width: 600px; /* Constrain width of the list */
    margin: 0 auto;
    text-align: left; /* Align text within list items to the left */
}

.lifestyle-benefits li {
    font-size: 1.1em;
    color: #333;
    margin-bottom: 12px;
    line-height: 1.6;
    padding-left: 30px; /* Space for the checkmark */
    position: relative; /* For custom checkmark */
}

.lifestyle-benefits li::before { /* Custom checkmark */
    content: '☑'; /* Using the text checkmark from HTML */
    color: #ff69b4; /* Pink checkmark - placeholder */
    position: absolute;
    left: 0;
    top: 0;
    font-size: 1.2em;
}

.lifestyle-benefits .highlight-yellow {
    background-color: #fffacd; /* Light yellow - placeholder */
    padding: 1px 3px;
    border-radius: 3px;
}

/* Hero Repeat Section Styles */
.hero-repeat {
    text-align: center;
    padding-bottom: 20px;
    /* It uses .header-decoration-top for the top image if present in HTML */
    /* It uses .header-main-content for the main content block */
}

.hero-repeat .header-main-content {
    /* Styles from .header-main-content will apply. Override if needed. */
    /* background-color: #f8f0ff; /* Slightly different pink/purple if needed */
}

.hero-repeat .alt-banner {
    background-color: #ffe6ff; /* Light pink/purple - placeholder */
    border-radius: 20px;
    padding: 10px 20px;
    margin: 0 auto 20px auto;
    display: inline-block;
}

.hero-repeat .alt-banner p {
    font-size: 1.2em;
    font-weight: bold;
    color: #800080; /* Purple text - placeholder */
}

/* h1, h2, .header-choice, .header-images styles from the main header will apply here too. */
/* If specific overrides are needed for .hero-repeat h1, h2, etc., they can be added: */
.hero-repeat h1 {
    font-size: 2.5em;
    color: #333;
    margin-bottom: 10px;
}
.hero-repeat h2 {
    font-family: 'Noto Serif JP', serif; /* Apply Serif font */
    /* Existing styles for size, color etc. might be here or inherited */
    /* font-size: 2em; */ /* Example if needed */
    /* color: #ff69b4; */ /* Example if needed */
}
/* Profile Section Styles */
.profile {
    padding: 30px 20px;
    text-align: center;
    margin: 20px auto;
    max-width: 800px; /* Adjust as needed */
    background-color: #f9f9f9; /* Very light grey background - placeholder */
    border-radius: 10px;
}

.profile h5 {
    font-family: 'Noto Serif JP', serif; /* Apply Serif font */
    font-size: 2em;
    color: #333;
    font-weight: bold;
    margin-bottom: 25px;
}

.profile-image {
    max-width: 200px; /* Adjust as needed */
    border-radius: 50%; /* Circular image */
    margin: 0 auto 20px auto;
    border: 3px solid #ffc0cb; /* Pink border - placeholder */
}

.profile-name {
    font-size: 1.1em;
    color: #555;
    margin-bottom: 5px;
    line-height: 1.5;
}

.profile-main-name {
    font-size: 1.6em;
    color: #333;
    font-weight: bold;
    margin-bottom: 20px;
}

.profile-main-name .profile-sub-name {
    font-size: 0.8em;
    color: #777;
    font-weight: normal;
}

.profile p:not(.profile-name):not(.profile-main-name) { /* Target descriptive paragraphs */
    font-size: 1em;
    color: #444;
    line-height: 1.7;
    text-align: left;
    margin-bottom: 15px;
    max-width: 700px; /* Constrain width of text block */
    margin-left: auto;
    margin-right: auto;
}

/* Gallery Section Styles */
.gallery {
    background-color: #e0f7fa; /* Light blue, similar to lifestyle - placeholder */
    padding: 40px 20px;
    text-align: center;
    margin: 20px 0; /* Full width section */
}

.gallery h5 {
    font-family: 'Noto Serif JP', serif; /* Apply Serif font */
    font-size: 2em;
    color: #333; /* Darker text for contrast */
    font-weight: bold;
    margin-bottom: 30px;
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Responsive grid, 3 columns */
    gap: 15px;
    max-width: 900px; /* Limit width of the grid */
    margin: 0 auto;
}

.gallery-item {
    background-color: #fff;
    border-radius: 8px;
    overflow: hidden; /* To contain image border radius */
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    position: relative; /* For play button on video items */
}

.gallery-item img {
    width: 100%;
    height: auto; /* Maintain aspect ratio */
    object-fit: cover; /* Ensure images fill the container */
    min-height: 200px; /* Ensure a minimum height for items */
}

.gallery-item.video-item .play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 3em;
    color: rgba(255, 255, 255, 0.8);
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 60px; /* For vertical centering of text icon */
    pointer-events: none; /* So it doesn't interfere with clicks on the image/link */
}

/* Footer Styles */
footer {
    background-color: #333; /* Dark grey background - placeholder */
    color: #f0f0f0; /* Light grey text - placeholder */
    padding: 30px 20px;
    text-align: center;
}

.footer-nav {
    margin-bottom: 15px;
}

.footer-nav a {
    color: #f0f0f0; /* Light grey link text - placeholder */
    margin: 0 10px;
    font-size: 0.9em;
    text-decoration: none;
}

.footer-nav a:hover {
    text-decoration: underline;
}

.copyright {
    font-size: 0.8em;
    color: #aaa; /* Lighter grey for copyright - placeholder */
}

/* Specific style for the final free offer section if needed */
.final-offer {
    margin-bottom: 40px; /* Add more space before the footer */
}

/* Course Details Section Styles */
.course-details {
    padding: 30px 20px;
    margin: 30px auto;
    max-width: 850px;
    background-color: #fefefe; /* Light background */
    border: 1px solid #eee;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.course-details h2 {
    font-family: 'Noto Serif JP', serif;
    font-size: 1.8em;
    color: #333;
    font-weight: bold;
    text-align: center;
    margin-bottom: 10px;
}

.course-details > p { /* Direct child p for the date/zoom info */
    text-align: center;
    font-size: 1.1em;
    color: #555;
    margin-bottom: 25px;
}

.course-pricing, .course-schedule, .course-notes {
    margin-bottom: 30px;
}

.course-pricing h3, .course-schedule h3, .course-notes h3 {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 1.4em;
    color: #444;
    font-weight: bold;
    margin-bottom: 15px;
    border-bottom: 2px solid #ffc0cb; /* Pink accent border */
    padding-bottom: 5px;
}

.course-pricing p {
    font-size: 1.1em;
    color: #333;
    line-height: 1.6;
    margin-bottom: 8px;
}

.course-pricing .note {
    font-size: 0.9em;
    color: #777;
}

.course-schedule table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
}

.course-schedule th, .course-schedule td {
    border: 1px solid #ddd;
    padding: 10px 12px;
    text-align: left;
    font-size: 0.95em;
    line-height: 1.5;
}

.course-schedule th {
    background-color: #f9f9f9;
    font-weight: bold;
    color: #333;
}

.course-schedule td:nth-child(1), /* 回数 */
.course-schedule td:nth-child(2) { /* 日時 */
    white-space: nowrap;
}


.course-notes ul {
    list-style: disc;
    padding-left: 20px;
    margin-top: 10px;
}

.course-notes li {
    font-size: 1em;
    color: #333;
    line-height: 1.7;
    margin-bottom: 8px;
}


/* Responsive Design Adjustments */

/* Tablets and smaller devices */
@media (max-width: 768px) {
    .briefing-title {
        font-size: 1.8em;
    }
    .briefing-subtitle {
        font-size: 1.1em;
    }
    .briefing-button {
        font-size: 1.1em;
        padding: 12px 25px;
    }

    .what-is-artist h3,
    .what-is-aframe h3 {
        font-size: 1.5em;
    }
    .what-is-artist p,
    .what-is-aframe p {
        font-size: 1em;
    }

    .media-coverage h4 {
        font-size: 1.6em;
    }
    .media-grid {
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
        gap: 15px;
    }

    .course-charms h5 {
        font-size: 1.6em;
    }
    .charm-item {
        flex-direction: column;
        align-items: center; /* Center items when stacked */
        text-align: center; /* Center text when stacked */
    }
    .charm-number img {
        margin-right: 0;
        margin-bottom: 15px; /* Space below image when stacked */
    }
    .charm-text h6 {
        font-size: 1.3em;
    }

    .earning-reasons h5 {
        font-size: 1.4em;
    }
     .earning-reasons h5 .reason-title-highlight {
        font-size: 1.6em; /* Adjusted relative to new h5 base */
    }
    .reason-item {
        flex-direction: column;
        align-items: center; /* Center items when stacked */
        text-align: center;
    }
    .reason-image img {
        margin-bottom: 15px; /* Space below image when stacked */
        max-width: 180px;
    }
    .reason-content h6 {
        text-align: center;
    }
    .reason-content .reason-subtitle {
        font-size: 1.1em;
    }
    .reason-content .reason-main-title {
        font-size: 1.4em;
    }
    .reason-content p {
        text-align: left; /* Keep paragraph text left-aligned for readability */
    }

    .course-details h2 {
        font-size: 1.6em;
    }
    .course-details > p {
        font-size: 1em;
    }
    .course-pricing h3, .course-schedule h3, .course-notes h3 {
        font-size: 1.3em;
    }
    .course-pricing p, .course-schedule th, .course-schedule td, .course-notes li {
        font-size: 0.9em;
    }
    .course-schedule th, .course-schedule td {
        padding: 8px 10px;
    }


    .horie-youtube h5,
    .lifestyle-benefits h5,
    .profile h5,
    .gallery h5 {
        font-size: 1.6em;
    }

    .youtube-video {
        max-width: 90%;
    }
    .youtube-video iframe {
        width: 100%;
        height: auto; /* Adjust height proportionally */
        min-height: 250px; /* Minimum height for smaller iframes */
    }


    .lifestyle-benefits ul {
        padding-left: 10px; /* Adjust padding for list items */
    }
    .lifestyle-benefits li {
        font-size: 1em;
        padding-left: 25px;
    }

    .hero-repeat h1 {
        font-size: 2em;
    }
    .hero-repeat h2 {
        font-size: 1.5em;
    }

    .profile-main-name {
        font-size: 1.4em;
    }
    .profile p:not(.profile-name):not(.profile-main-name) {
        font-size: 0.95em;
    }

    .gallery-grid {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    }
}

/* Mobile devices */
@media (max-width: 480px) {
    body {
        padding: 0 10px; /* Add some padding to the body on small screens */
    }
    .briefing-cta {
        padding: 20px 15px;
        margin: 20px auto;
    }
    .briefing-title {
        font-size: 1.5em;
    }
    .briefing-subtitle {
        font-size: 1em;
    }
    .briefing-button {
        font-size: 1em;
        padding: 10px 20px;
        width: 90%; /* Make button wider */
    }

    .what-is-artist,
    .what-is-aframe,
    .course-charms,
    .earning-reasons,
    .profile {
        padding: 20px 15px;
        margin: 15px auto;
    }

    .what-is-artist h3,
    .what-is-aframe h3 {
        font-size: 1.3em;
    }
    .what-is-aframe .highlight-pink {
        font-size: 1.2em;
    }

    .media-coverage {
        padding: 20px 10px;
    }
    .media-coverage h4 {
        font-size: 1.4em;
    }
    .media-grid {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 10px;
    }
    .media-item p {
        font-size: 0.8em;
    }

    .course-charms h5 {
        font-size: 1.4em;
    }
    .charm-text h6 {
        font-size: 1.2em;
    }
    .charm-text p {
        font-size: 0.9em;
    }

    .earning-reasons h5 {
        font-size: 1.3em;
    }
    .earning-reasons h5 .reason-title-highlight {
        font-size: 1.4em;
    }
    .earning-reasons .intro-text {
        font-size: 0.9em;
        margin-bottom: 20px;
    }
    .reason-content .reason-subtitle {
        font-size: 1em;
    }
    .reason-content .reason-main-title {
        font-size: 1.2em;
    }
    .reason-content p {
        font-size: 0.9em;
    }

    .course-details {
        padding: 20px 15px;
    }
    .course-details h2 {
        font-size: 1.4em;
    }
    .course-pricing h3, .course-schedule h3, .course-notes h3 {
        font-size: 1.2em;
    }
    .course-pricing p, .course-schedule th, .course-schedule td, .course-notes li {
        font-size: 0.85em;
    }
     .course-schedule th, .course-schedule td {
        padding: 6px 8px;
    }
    .course-schedule table { /* Allow table to scroll horizontally on small screens */
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }


    .horie-youtube,
    .lifestyle-benefits,
    .gallery {
        padding: 20px 10px;
    }
    .horie-youtube h5,
    .lifestyle-benefits h5,
    .profile h5,
    .gallery h5 {
        font-size: 1.4em;
    }
    .horie-youtube p {
        font-size: 0.9em;
    }
    .youtube-video iframe {
        min-height: 200px;
    }

    .lifestyle-benefits li {
        font-size: 0.9em;
    }

    .hero-repeat h1 {
        font-size: 1.8em;
    }
    .hero-repeat h2 {
        font-size: 1.3em;
    }
    .hero-repeat .alt-banner p {
        font-size: 1em;
    }

    .profile-image {
        max-width: 150px;
    }
    .profile-main-name {
        font-size: 1.2em;
    }
    .profile p:not(.profile-name):not(.profile-main-name) {
        font-size: 0.9em;
    }

    .gallery-grid {
        grid-template-columns: 1fr; /* Single column for very small screens */
        gap: 15px;
    }

    .footer-nav a {
        display: block; /* Stack footer links */
        margin: 5px 0;
    }
}