*, *::before, *::after {
    box-sizing: border-box;
}

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

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif;
    line-height: 1.7;
    background-color: #FFFFFF;
    color: #333333;
    overflow-x: hidden;
}

li {
    list-style: none;
}

a {
    text-decoration: none;
    color: #C00000;
    transition: opacity 0.3s;
}

a:hover {
    opacity: 0.7;
}

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

.container {
    width: 90%;
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
}

.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 40px;
    background-color: #fff;
    border-bottom: 1px solid #f0f0f0;
}

.header-logo a {
    color: #333;
    font-weight: bold;
}

.header-nav ul {
    display: flex;
    gap: 20px;
}

.footer {
    background-color: #333;
    color: #fff;
    padding: 40px 0;
    text-align: center;
}

.copyright {
    margin-top: 20px;
    font-size: 12px;
    color: #aaa;
}

.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 40px;
    background-color: #fff;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

body {
    padding-top: 80px;
}

.header-logo img {
    height: 60px;
    width: auto;
}

.header-logo a:hover {
    opacity: 0.7;
}

.header-nav ul {
    display: flex;
    gap: 25px;
}

.header-nav a {
    font-size: 15px;
    font-weight: bold;
    color: #333;
    position: relative;
    padding: 5px 0;
}

.header-nav a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #C00000;
    transform: scaleX(0);
    transition: transform 0.3s;
}

.header-nav a:hover::after {
    transform: scaleX(1);
}

.hamburger-button {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    z-index: 150;
}


@media (max-width: 768px) {

    .header-nav {
        position: fixed;
        top: 0;
        right: -100%;
        width: 100%;
        height: 100vh;
        background-color: rgba(255, 255, 255, 0.95);
        transition: right 0.5s;
        z-index: 120;
        padding-top: 100px;
    }
    
    .header-nav.is-active {
        right: 0;
    }

    .header-nav ul {
        flex-direction: column;
        align-items: center;
        gap: 40px;
    }
    
    .header-nav a {
        font-size: 20px;
    }

    .hamburger-button {
        display: block;
        position: relative;
        width: 40px;
        height: 40px;
    }

    .hamburger-button span {
        display: block;
        position: absolute;
        left: 5px;
        width: 30px;
        height: 2px;
        background-color: #333;
        transition: all 0.3s;
    }

    .hamburger-button span:nth-of-type(1) { top: 10px; }
    .hamburger-button span:nth-of-type(2) { top: 19px; }
    .hamburger-button span:nth-of-type(3) { bottom: 10px; }
    
    .hamburger-button.is-active span:nth-of-type(1) {
        top: 19px;
        transform: rotate(45deg);
    }
    .hamburger-button.is-active span:nth-of-type(2) {
        opacity: 0;
    }
    .hamburger-button.is-active span:nth-of-type(3) {
        top: 19px;
        transform: rotate(-45deg);
    }
}

#hero-slider {
    width: 100%;
    height: 600px;
    position: relative;
}

#hero-slider .swiper,
#hero-slider .swiper-slide {
    width: 100%;
    height: 100%;
}

#hero-slider .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

#hero-slider .swiper-slide {
    background-color: #f0f2f5; 
}

.swiper-button-prev,
.swiper-button-next {
    color: #C00000;
}

.swiper-pagination-bullet {
    background: #fff;
    opacity: 0.8;
}

.swiper-pagination-bullet-active {
    background: #C00000;
}

.news-section {
    padding: 60px 0;
}

.section-title {
    text-align: center;
    font-size: 28px;
    margin-bottom: 40px;
    font-weight: bold;
}

.news-list li {
    border-bottom: 1px solid #e0e0e0;
}

.news-list a {
    display: flex;
    align-items: center;
    padding: 20px 10px;
    color: #333;
    transition: background-color 0.3s;
    gap: 20px;
}

.news-list a:hover {
    background-color: #f9f9f9;
    opacity: 1;
}

.news-list time {
    font-size: 14px;
    font-weight: bold;
    color: #555;
}

.news-list span {
    font-size: 16px;
}

.top-news-title {
    flex: 1;
}

.cta-section {
    background-color: #f9f9f9;
    padding: 60px 0;
}

.cta-cards {
    display: flex;
    justify-content: space-between;
    gap: 30px;
}

.card {
    width: 32%;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    overflow: hidden;
    transition: transform 0.3s, box-shadow 0.3s;
    color: #333;
    display: block;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
    opacity: 1;
}

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

.card-content {
    padding: 20px;
}

.card-content h3 {
    font-size: 20px;
    margin-bottom: 10px;
    color: #C00000;
}

.card-content p {
    font-size: 14px;
    line-height: 1.6;
}

@media (max-width: 768px) {
    .cta-cards {
        flex-direction: column;
        gap: 20px;
    }
    .card {
        width: 100%;
    }
}

.footer {
    background-color: #333;
    color: #fff;
    padding: 60px 0 0;
}

.footer-container {
    display: flex;
    justify-content: space-between;
    padding-bottom: 40px;
}

.footer-left {
    width: 30%;
}

.footer-logo {
    font-size: 20px;
    font-weight: bold;
    color: #fff;
    opacity: 1;
}
.footer-logo:hover {
    opacity: 0.8;
}

.footer-address {
    font-size: 14px;
    line-height: 1.8;
    margin-top: 20px;
    color: #ccc;
}

.footer-right {
    width: 65%;
}

.footer-nav {
    display: flex;
    justify-content: space-between;
}

.footer-nav ul {
    width: 30%;
}

.footer-nav a {
    color: #ccc;
    font-size: 15px;
    transition: color 0.3s;
    display: inline-block;
    padding: 5px 0;
}

.footer-nav a:hover {
    color: #fff;
    opacity: 1;
}

.copyright {
    background-color: #222;
    text-align: center;
    padding: 15px 0;
    font-size: 12px;
    color: #aaa;
}

@media (max-width: 768px) {
    .footer-container {
        flex-direction: column;
    }
    .footer-left, .footer-right {
        width: 100%;
        margin-bottom: 30px;
    }
    .footer-nav {
        flex-direction: column;
        gap: 20px;
    }
    .footer-nav ul {
        width: 100%;
    }
    .header-logo img {
        height: 45px;
    }
}

.sns-links {
    margin-top: 20px;
    display: flex;
    gap: 16px;
}

.sns-links a {
    display: inline-block;
    padding: 0;
}
.sns-links a:hover {
    opacity: 0.7;
    color: inherit;
}

.sns-links img {
    width: 28px;
    height: 28px;
    display: block;
}

.footer-left {
    display: flex;
    flex-direction: column;
    align-items: flex-start; 
}

@media (max-width: 768px) {
    .footer-left {
        align-items: center;
    }
}

.page-header {
    background-color: #f9f9f9;
    padding: 40px 0;
    text-align: center;
    border-bottom: 1px solid #e0e0e0;
}

.page-title {
    font-size: 32px;
    color: #333;
}

.page-content .container {
    padding-top: 60px;
    padding-bottom: 60px;
}

.profile-section {
    margin-bottom: 60px;
}

.profile-section:last-child {
    margin-bottom: 0;
}

.profile-section p {
    font-size: 16px;
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

.profile-table {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    border-collapse: collapse;
    margin-top: -20px;
}

.profile-table th,
.profile-table td {
    border-bottom: 1px solid #e0e0e0;
    padding: 20px;
    text-align: left;
    font-size: 16px;
}

.profile-table th {
    width: 30%;
    background-color: #f9f9f9;
    font-weight: bold;
}

.card-list-container {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
}

.member-card {
    width: calc(33.333% - 20px); 
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    overflow: hidden;
    transition: transform 0.3s, box-shadow 0.3s;
    display: flex;
    flex-direction: column;
}

.member-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
}

.member-card .card-content p {
    margin-bottom: 20px;
}

.btn-detail {
    display: block;
    width: 100%;
    background-color: #C00000;
    color: #fff;
    text-align: center;
    padding: 10px;
    border-radius: 5px;
    font-weight: bold;
    margin-top: auto;
}

.btn-detail:hover {
    background-color: #a00000;
    color: #fff;
    opacity: 1;
}

@media (max-width: 992px) {
    .member-card {
        width: calc(50% - 15px);
    }
}

@media (max-width: 768px) {
    .member-card {
        width: 100%;
    }
}

.page-lead {
    text-align: center;
    font-size: 16px;
    margin-bottom: 40px;
}

.shop-address {
    font-size: 14px;
    font-weight: bold;
    color: #555;
    padding-left: 20px;
    position: relative;
    margin-bottom: 15px !important;
}

.shop-address::before {
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    background-image: url('data:image/svg+xml;charset=utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"%3E%3Cpath fill="%23555555" d="M172.268 501.67C26.97 291.031 0 269.413 0 192 0 85.961 85.961 0 192 0s192 85.961 192 192c0 77.413-26.97 99.031-172.268 309.67a24 24 0 01-35.464 0zM192 256a64 64 0 100-128 64 64 0 000 128z"/%3E%3C/svg%3E');
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    left: 0;
    top: 3px;
}

.faq-list {
    max-width: 800px;
    margin: 0 auto;
}

.faq-item {
    border-bottom: 1px solid #e0e0e0;
}

.faq-question {
    width: 100%;
    display: flex;
    align-items: flex-start;
    text-align: left;
    padding: 20px 0;
    background-color: transparent;
    border: none;
    cursor: pointer;
    font-size: 16px;
}

.faq-question span {
    font-size: 20px;
    font-weight: bold;
    color: #C00000;
    margin-right: 15px;
}

.faq-question p {
    flex: 1;
    font-weight: bold;
    color: #333;
}

.faq-question::after {
    content: '+';
    font-size: 24px;
    font-weight: bold;
    color: #C00000;
    transition: transform 0.3s;
}

.faq-question.is-open::after {
    transform: rotate(45deg);
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease-in-out, padding 0.5s ease-in-out;
}

.faq-answer p {
    padding: 0 20px 20px 40px;
    font-size: 16px;
    line-height: 1.8;
}

.faq-item.is-open .faq-answer {
    max-height: 500px;
}

.article-list {
    list-style: none;
    padding: 0;
    max-width: 900px;
    margin: 0 auto;
}

.article-item {
    border-bottom: 1px solid #e0e0e0;
}

.article-item a {
    display: flex;
    align-items: center;
    padding: 25px 15px;
    text-decoration: none;
    color: #333;
    transition: background-color 0.3s;
    gap: 20px;
    flex-direction: row-reverse;
}

.article-item a:hover {
    background-color: #f9f9f9;
    opacity: 1;
}

.article-date {
    font-size: 15px;
    color: #555;
    width: 110px;
}

.category-tag {
    font-size: 12px;
    font-weight: bold;
    color: #fff;
    padding: 4px 10px;
    border-radius: 4px;
    margin-right: 20px;
    white-space: nowrap;
}

.article-title {
    font-size: 18px;
    font-weight: bold;
    flex: 1;
}

.article-thumbnail {
    width: 160px;
    height: 100px;
    flex-shrink: 0;
}

.article-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
}

.article-item a {
    gap: 20px;
}

.article-content {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.article-title {
    margin-top: 10px;
}

.article-meta {
    display: flex;
    align-items: center;
    gap: 15px;
}

.category-tag {
    color: #fff;
    font-weight: bold;
    font-size: 12px;
    padding: 4px 10px;
    border-radius: 4px;
    white-space: nowrap;
}

.category-tag.category-tag--news {
    background-color: #007bff;
}

.category-tag.category-tag--event {
    background-color: #28a745;
}

.category-tag.category-tag--column {
    background-color: #ffc107;
    color: #333;
}

.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 40px;
}

.pagination a,
.pagination span {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    border: 1px solid #e0e0e0;
    border-radius: 5px;
    font-size: 16px;
    text-decoration: none;
    color: #333;
    transition: background-color 0.3s, color 0.3s;
}

.pagination a:hover {
    background-color: #f0f0f0;
    opacity: 1;
}

.pagination .is-current {
    background-color: #C00000;
    color: #fff;
    border-color: #C00000;
    font-weight: bold;
}

.article-detail {
    max-width: 800px;
    margin: 0 auto;
}
.article-detail-title {
    font-size: 32px;
    margin-bottom: 15px;
    line-height: 1.4;
}
.article-detail-meta {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 30px;
}
.article-detail-meta time { font-size: 15px; color: #555; }
.article-detail-eyecatch {
    margin-bottom: 20px;
}
.article-detail-eyecatch img {
    max-width: 800px;
    width: 100%;
    height: auto;
    border-radius: 8px;
}
.article-detail-body {
    font-size: 16px;
    line-height: 1.9;
}
.article-detail-body h2 { font-size: 24px; margin: 40px 0 20px; border-bottom: 2px solid #e0e0e0; padding-bottom: 10px; }
.article-detail-body p { margin-bottom: 20px; }
.article-nav {
    margin-top: 60px;
    text-align: center;
}
.article-nav a {
}

.contact-page-section .contact-intro {
    text-align: center;
    margin-bottom: 50px;
    font-size: 1.1em;
    color: #555;
    line-height: 1.8;
}

.contact-form .form-group {
    margin-bottom: 30px;
}

.contact-form label {
    display: block;
    margin-bottom: 10px;
    font-weight: bold;
    color: #444;
    font-size: 1.05em;
}

.contact-form .required-mark {
    color: #d9534f;
    font-size: 0.9em;
    margin-left: 5px;
    font-weight: normal;
}

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form textarea {
    width: 100%;
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 1em;
    font-family: inherit;
    box-sizing: border-box;
    transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}
.contact-form input[type="text"]:focus,
.contact-form input[type="email"]:focus,
.contact-form input[type="tel"]:focus,
.contact-form textarea:focus {
    border-color: #8B4513;
    box-shadow: 0 0 0 3px rgba(139, 69, 19, 0.15);
    outline: none;
}


.contact-form textarea {
    min-height: 180px;
    resize: vertical;
}

.contact-form .form-group.text-center {
    margin-top: 40px;
    text-align: center;
}

.contact-page-section .contact-intro {
    text-align: center;
    margin-bottom: 50px;
    font-size: 1.1em;
    color: #555;
    line-height: 1.8;
}

.contact-form {
    max-width: 700px; 
    margin-left: auto;  
    margin-right: auto; 
}

.contact-form .form-group {
    margin-bottom: 30px;
}

.g-recaptcha-container {
    display: flex;
    justify-content: center; 
    margin-bottom: 25px;
}


.honeypot-field {
    opacity: 0;
    position: absolute;
    top: 0;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
    z-index: -1;
}

.btn {
    display: inline-block;
    background-color: #C00000;
    color: #fff;
    text-decoration: none;
    padding: 12px 40px;
    border-radius: 5px;
    font-weight: bold;
    transition: background-color 0.3s;
}

.btn:hover {
    background-color: #a00000;
    color: #fff;
    opacity: 1;
}

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

.filter-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-bottom: 40px;
}

.filter-btn {
    background-color: #fff;
    border: 1px solid #ddd;
    color: #333;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s;
}

.filter-btn:hover {
    background-color: #f0f0f0;
}

.filter-btn.is-active {
    background-color: #C00000;
    color: #fff;
    border-color: #C00000;
}

.search-form-container {
    max-width: 600px;
    margin: 0 auto 40px;
}

.search-form input[type="search"] {
    width: 100%;
    padding: 15px 20px;
    font-size: 16px;
    border: 1px solid #ddd;
    border-radius: 30px;
    box-sizing: border-box;
    padding-left: 50px; 
    background-image: url('data:image/svg+xml;charset=utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"%3E%3Cpath fill="%23AAAAAA" d="M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z"/%3E%3C/svg%3E');
    background-repeat: no-repeat;
    background-position: 15px center;
    background-size: 20px;
}

.greeting-content {
    max-width: 800px;
    margin: 0 auto;
    text-align: left; 
}

.greeting-content p {
    margin-bottom: 25px; 
    line-height: 2;      
}

.philosophy-content {
    max-width: 800px;
    margin: 0 auto;
    text-align: left; 
}

.philosophy-catchphrase {
    font-size: 24px;
    font-weight: bold;
    text-align: center;
    margin-bottom: 30px;
}

.philosophy-content p {
    margin-bottom: 25px; 
    line-height: 2; 
}

.text-content {
    max-width: 800px;
    margin: 0 auto;
}
.text-content p, .text-content ul {
    margin-bottom: 20px;
    line-height: 1.9;
}

.support-list {
    list-style: none; 
    padding-left: 0;
}
.support-list li {
    padding-left: 1.5em; 
    text-indent: -1.5em; 
    margin-bottom: 15px;
}
.support-list li::before {
    content: '✓'; 
    color: #C00000; 
    font-weight: bold;
    margin-right: 0.5em;
}

.benefit-list {
    list-style: none;
    padding-left: 0;
    margin-top: 40px;
}

.benefit-item {
    position: relative;
    padding-left: 40px; /* アイコン用のスペース */
    margin-bottom: 30px;
}

/* アイコンをCSSで描画 */
.benefit-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 5px;
    width: 24px;
    height: 24px;
    background-color: #C00000; /* アイコンの色 */
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

.benefit-item h3 {
    font-size: 20px;
    margin-bottom: 10px;
}

.benefit-item p {
    margin-bottom: 0;
}

.benefit-item:nth-child(1)::before { 
    -webkit-mask-image: url('data:image/svg+xml;charset=utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"%3E%3Cpath fill="currentColor" d="M151.6 469.6C145.5 476.2 137 480 128 480s-17.5-3.8-23.6-10.4l-88-96c-11.5-12.5-11.1-32.2.9-43.7s32.2-11.1 43.7.9l64 69.9 165.7-221c10-13.4 28.1-15.8 41.5-5.8s15.8 28.1 5.8 41.5L151.6 469.6z"/%3E%3C/svg%3E');
    mask-image: url('data:image/svg+xml;charset=utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"%3E%3Cpath fill="currentColor" d="M151.6 469.6C145.5 476.2 137 480 128 480s-17.5-3.8-23.6-10.4l-88-96c-11.5-12.5-11.1-32.2.9-43.7s32.2-11.1 43.7.9l64 69.9 165.7-221c10-13.4 28.1-15.8 41.5-5.8s15.8 28.1 5.8 41.5L151.6 469.6z"/%3E%3C/svg%3E');
}
.benefit-item:nth-child(2)::before { 
    -webkit-mask-image: url('data:image/svg+xml;charset=utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"%3E%3Cpath fill="currentColor" d="M576 256c0-13.3-10.7-24-24-24s-24 10.7-24 24v88c0 4.2-1.1 8.2-3.2 11.8s-4.8 6.5-8.2 8.2c-1.1.5-2.2.8-3.3.9s-2.2.3-3.3.3H33.3c-1.1 0-2.2-.1-3.3-.3s-2.2-.4-3.3-.9c-3.4-1.7-6.2-4.1-8.2-7.5s-3.2-7-3.2-11.1V128c0-13.3 10.7-24 24-24s24 10.7 24 24v22.4l191.1-143.3c7.5-5.6 17.4-6.2 25.5-1.7s13.4 13.1 13.4 22.6V208c0 13.3 10.7 24 24 24s24-10.7 24-24V106.7c0-23.4-14.2-44.4-35.8-52.9s-45.8 1.1-61.9 18.2L184.6 128H528c13.3 0 24-10.7 24-24s-10.7-24-24-24H33.3C14.9 80 0 94.9 0 113.3v231.4C0 363.1 14.9 378 33.3 378H528c13.3 0 24-10.7 24-24s-10.7-24-24-24H336c-13.3 0-24-10.7-24-24s10.7-24 24-24h192z"/%3E%3C/svg%3E');
    mask-image: url('data:image/svg+xml;charset=utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"%3E%3Cpath fill="currentColor" d="M576 256c0-13.3-10.7-24-24-24s-24 10.7-24 24v88c0 4.2-1.1 8.2-3.2 11.8s-4.8 6.5-8.2 8.2c-1.1.5-2.2.8-3.3.9s-2.2.3-3.3.3H33.3c-1.1 0-2.2-.1-3.3-.3s-2.2-.4-3.3-.9c-3.4-1.7-6.2-4.1-8.2-7.5s-3.2-7-3.2-11.1V128c0-13.3 10.7-24 24-24s24 10.7 24 24v22.4l191.1-143.3c7.5-5.6 17.4-6.2 25.5-1.7s13.4 13.1 13.4 22.6V208c0 13.3 10.7 24 24 24s24-10.7 24-24V106.7c0-23.4-14.2-44.4-35.8-52.9s-45.8 1.1-61.9 18.2L184.6 128H528c13.3 0 24-10.7 24-24s-10.7-24-24-24H33.3C14.9 80 0 94.9 0 113.3v231.4C0 363.1 14.9 378 33.3 378H528c13.3 0 24-10.7 24-24s-10.7-24-24-24H336c-13.3 0-24-10.7-24-24s10.7-24 24-24h192z"/%3E%3C/svg%3E');
}
.benefit-item:nth-child(3)::before { 
    -webkit-mask-image: url('data:image/svg+xml;charset=utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"%3E%3Cpath fill="currentColor" d="M495.9 166.6c3.2 8.7 .5 18.4-6.4 24.6l-43.3 39.4c1.1 8.3 1.7 16.8 1.7 25.4s-.6 17.1-1.7 25.4l43.3 39.4c6.9 6.2 9.6 15.9 6.4 24.6-4.4 11.9-15.7 20-28.1 20h-86.8c-3.3 8.7-7.5 16.8-12.5 24.5l43.3 39.4c6.9 6.2 9.6 15.9 6.4 24.6-4.4 11.9-15.7 20-28.1 20h-86.8c-8.7-3.3-16.8-7.5-24.5-12.5l-39.4 43.3c-6.2 6.9-15.9 9.6-24.6 6.4-11.9-4.4-20-15.7-20-28.1v-86.8c-8.7-3.3-16.8-7.5-24.5-12.5l-39.4 43.3c-6.2 6.9-15.9 9.6-24.6 6.4-11.9-4.4-20-15.7-20-28.1v-86.8c-3.3-8.7-7.5-16.8-12.5-24.5l-43.3-39.4c-6.9-6.2-9.6-15.9-6.4-24.6 4.4-11.9 15.7-20 28.1-20h86.8c3.3-8.7 7.5-16.8 12.5-24.5l-43.3-39.4c-6.9-6.2-9.6-15.9-6.4-24.6 4.4-11.9 15.7-20 28.1-20h86.8c8.7 3.3 16.8 7.5 24.5 12.5l39.4-43.3c6.2-6.9 15.9-9.6 24.6-6.4 11.9 4.4 20 15.7 20 28.1v86.8c8.7 3.3 16.8 7.5 24.5 12.5l39.4-43.3c6.2-6.9 15.9-9.6 24.6-6.4 11.9 4.4 20 15.7 20 28.1v86.8c3.3 8.7 7.5 16.8 12.5 24.5h43.3-43.3h86.8c12.4 0 23.7 8.1 28.1 20zM256 320a64 64 0 1 0 0-128 64 64 0 1 0 0 128z"/%3E%3C/svg%3E');
    mask-image: url('data:image/svg+xml;charset=utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"%3E%3Cpath fill="currentColor" d="M495.9 166.6c3.2 8.7 .5 18.4-6.4 24.6l-43.3 39.4c1.1 8.3 1.7 16.8 1.7 25.4s-.6 17.1-1.7 25.4l43.3 39.4c6.9 6.2 9.6 15.9 6.4 24.6-4.4 11.9-15.7 20-28.1 20h-86.8c-3.3 8.7-7.5 16.8-12.5 24.5l43.3 39.4c6.9 6.2 9.6 15.9 6.4 24.6-4.4 11.9-15.7 20-28.1 20h-86.8c-8.7-3.3-16.8-7.5-24.5-12.5l-39.4 43.3c-6.2 6.9-15.9 9.6-24.6 6.4-11.9-4.4-20-15.7-20-28.1v-86.8c-8.7-3.3-16.8-7.5-24.5-12.5l-39.4 43.3c-6.2 6.9-15.9 9.6-24.6 6.4-11.9-4.4-20-15.7-20-28.1v-86.8c-3.3-8.7-7.5-16.8-12.5-24.5l-43.3-39.4c-6.9-6.2-9.6-15.9-6.4-24.6 4.4-11.9 15.7-20 28.1-20h86.8c3.3-8.7 7.5-16.8 12.5-24.5l-43.3-39.4c-6.9-6.2-9.6-15.9-6.4-24.6 4.4-11.9 15.7-20 28.1-20h86.8c8.7 3.3 16.8 7.5 24.5 12.5l39.4-43.3c6.2-6.9 15.9-9.6 24.6-6.4 11.9 4.4 20 15.7 20 28.1v86.8c8.7 3.3 16.8 7.5 24.5 12.5l39.4-43.3c6.2-6.9 15.9-9.6 24.6-6.4 11.9 4.4 20 15.7 20 28.1v86.8c3.3 8.7 7.5 16.8 12.5 24.5h43.3-43.3h86.8c12.4 0 23.7 8.1 28.1 20zM256 320a64 64 0 1 0 0-128 64 64 0 1 0 0 128z"/%3E%3C/svg%3E');
}
.benefit-item:nth-child(4)::before {
    -webkit-mask-image: url('data:image/svg+xml;charset=utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"%3E%3Cpath fill="currentColor" d="M0 24C0 10.7 10.7 0 24 0H69.5c22 0 41.5 12.8 50.6 32h411c26.3 0 45.5 25 38.6 50.4l-41 152.3c-8.5 31.4-37 53.3-69.5 53.3H170.7l5.4 28.5c2.2 11.3 12.1 19.5 23.6 19.5H488c13.3 0 24 10.7 24 24s-10.7 24-24 24H199.7c-34.6 0-64.3-24.6-70.7-58.5L77.4 54.5c-.7-3.8-4-6.5-7.9-6.5H24C10.7 48 0 37.3 0 24zM128 464a48 48 0 1 0 96 0 48 48 0 1 0 -96 0zm336-48a48 48 0 1 0 0 96 48 48 0 1 0 0-96z"/%3E%3C/svg%3E');
    mask-image: url('data:image/svg+xml;charset=utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"%3E%3Cpath fill="currentColor" d="M0 24C0 10.7 10.7 0 24 0H69.5c22 0 41.5 12.8 50.6 32h411c26.3 0 45.5 25 38.6 50.4l-41 152.3c-8.5 31.4-37 53.3-69.5 53.3H170.7l5.4 28.5c2.2 11.3 12.1 19.5 23.6 19.5H488c13.3 0 24 10.7 24 24s-10.7 24-24 24H199.7c-34.6 0-64.3-24.6-70.7-58.5L77.4 54.5c-.7-3.8-4-6.5-7.9-6.5H24C10.7 48 0 37.3 0 24zM128 464a48 48 0 1 0 96 0 48 48 0 1 0 -96 0zm336-48a48 48 0 1 0 0 96 48 48 0 1 0 0-96z"/%3E%3C/svg%3E');
}

.membership-table {
    width: 100%;
    border-collapse: collapse; 
    margin: 30px 0;
}

.membership-table th,
.membership-table td {
    border: 1px solid #ddd; 
    padding: 15px;
    text-align: left;
    vertical-align: middle; 
}

.membership-table thead th {
    background-color: #f8f8f8; 
    font-weight: bold;
    text-align: center;
}

.membership-table tbody th {
    font-weight: bold;
    width: 20%; 
}

.membership-table td {
    width: 55%; 
}

.membership-table td:last-child {
    width: 25%; 
    text-align: center;
    font-weight: bold;
    font-size: 18px;
}

.table-note {
    font-size: 14px;
    color: #666;
    text-align: right;
}

.process-list {
    list-style: none;
    padding-left: 0;
    counter-reset: process-counter; 
}

.process-item {
    position: relative;
    padding: 20px 20px 20px 60px; 
    margin-bottom: 20px;
    border: 1px solid #eee;
    border-radius: 8px;
    background-color: #fff;
}

.process-item::before {
    counter-increment: process-counter; 
    content: counter(process-counter); 
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 24px;
    font-weight: bold;
    color: #fff;
    background-color: #C00000;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.process-item h3 {
    font-size: 20px;
    margin-bottom: 10px;
}

.process-item p {
    margin-bottom: 0;
    line-height: 1.8;
}

.cta-section-simple {
    padding: 60px 0;
    background-color: #f8f8f8;
}

.cta-section-simple p {
    margin: 20px 0 30px;
    font-size: 18px;
}

.text-content ol {
    padding-left: 2em; 
}
.text-content ol li {
    margin-bottom: 10px;
}

.article-nav {
    margin-top: 60px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid #eee;
    padding-top: 30px;
}
.article-nav-link {
    width: 40%;
}
.article-nav-link a {
    display: block;
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 8px;
    text-decoration: none;
    transition: background-color 0.3s;
}
.article-nav-link a:hover {
    background-color: #f8f8f8;
}
.article-nav-link span {
    font-size: 14px;
    color: #555;
    display: block;
    margin-bottom: 5px;
}
.article-nav-link p {
    font-size: 16px;
    font-weight: bold;
    color: #333;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.article-nav-link.next {
    text-align: right;
}
.article-nav-back {
    font-weight: bold;
    color: #555;
}

.share-section {
    margin-top: 60px;
    padding-top: 40px;
    border-top: 1px solid #eee;
}
.share-title {
    text-align: center;
    font-size: 16px;
    color: #555;
    margin-bottom: 20px;
}
.share-buttons {
    display: flex;
    justify-content: center;
    gap: 15px;
}
.share-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: 5px;
    color: #fff;
    font-weight: bold;
    text-decoration: none;
    transition: opacity 0.3s;
}
.share-btn:hover {
    opacity: 0.8;
}

.share-btn.x { background-color: #000000; }
.share-btn.facebook { background-color: #1877F2; }
.share-btn.line { background-color: #06C755; }

.btn.is-small {
    padding: 8px 25px;
    font-size: 14px;
}

@media (max-width: 768px) {
    .article-item a {
        flex-direction: column; 
        align-items: flex-start; 
        gap: 15px; 
    }

    .article-thumbnail,
    .article-content {
        width: 100%;
    }

    .article-thumbnail {
        height: auto; 
        aspect-ratio: 16 / 9; 
    }
}

.sustainability-promo {
  position: relative; 
  padding: 80px 0;
  background-image: url('../images/sustainability-bg.jpg'); 
  background-size: cover; 
  background-position: center; 
  z-index: 1; 
}

.sustainability-promo::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); 
  z-index: -1; 
}

.sustainability-promo h2,
.sustainability-promo p {
  color: #fff; 
}

.sustainability-promo .btn {
  background-color: #fff;
  color: #333;
}
.sustainability-promo .btn:hover {
  background-color: #f0f0f0;
}