/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Zen Kaku Gothic New', sans-serif;
    color: #FFFFFF;
    line-height: 1.6;
    background-color: #465940;
}

/* Color Variables */
:root {
    --color-dark-green: #465940;
    --color-very-dark-green: #142601;
    --color-light-grey-green: #B8BFBE;
    --color-white: #FFFFFF;
}

/* Container */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Header */
.header {
    background-color: #465940;
    padding: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.header-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 10px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    display: flex;
    align-items: center;
    gap: 15px;
    flex: 0 0 auto;
}

.logo a {
    display: flex;
    align-items: center;
    text-decoration: none;
    transition: opacity 0.3s ease;
}

.logo a:hover {
    opacity: 0.7;
}

.logo-icon {
    width: 120px;
    height: 120px;
    object-fit: contain;
    max-height: 45px;
    width: auto;
}

.logo-text {
    font-size: 18px;
    font-weight: 500;
    color: var(--color-white);
}

.nav {
    flex: 1;
    display: flex;
    justify-content: flex-end;
}

.nav-list {
    display: flex;
    list-style: none;
    gap: 30px;
}

.nav-link {
    color: var(--color-white);
    text-decoration: none;
    font-size: 18px;
    font-weight: 400;
    transition: opacity 0.3s ease;
}

.nav-link:hover {
    opacity: 0.7;
}

/* Phone Number (PC) */
.header-phone-pc {
    color: var(--color-white);
    text-decoration: none;
    font-size: 18px;
    font-weight: 400;
    transition: opacity 0.3s ease;
    white-space: nowrap;
    margin-left: 20px;
}

.header-phone-pc:hover {
    opacity: 0.7;
}

/* Mobile Menu Group */
.header-mobile-group {
    display: none;
    align-items: center;
    gap: 0;
    flex: 0 0 auto;
}

/* Phone Icon (Mobile) */
.header-phone-icon {
    display: none;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    margin-right: 0;
    transition: opacity 0.3s ease;
    flex: 0 0 auto;
}

.header-phone-icon:hover {
    opacity: 0.7;
}

.phone-icon-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    margin-right: 40px;
}

/* Hamburger Menu Button */
.hamburger-menu {
    display: none;
    flex-direction: column;
    justify-content: space-around;
    width: 30px;
    height: 30px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 1001;
    flex: 0 0 auto;
    align-self: center;
}

.hamburger-menu span {
    width: 100%;
    height: 3px;
    background-color: #FFFFFF;
    border-radius: 3px;
    transition: all 0.3s ease;
}

/* Mobile Menu Overlay */
.mobile-menu-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 9999;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.mobile-menu-overlay.active {
    display: block;
    opacity: 1;
}

.mobile-menu {
    position: fixed;
    top: 0;
    right: -100%;
    width: 100%;
    max-width: 400px;
    background-color: #465940;
    padding: 15px 40px;
    box-shadow: -2px 0 10px rgba(0, 0, 0, 0.3);
    transition: right 0.3s ease;
    overflow-y: auto;
}

.mobile-menu-overlay.active .mobile-menu {
    right: 0;
}

.mobile-menu-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.mobile-logo {
    display: flex;
    align-items: center;
    gap: 15px;
    text-decoration: none;
    transition: opacity 0.3s ease;
}

.mobile-logo:hover {
    opacity: 0.7;
}

.mobile-logo-icon {
    width: 120px;
    height: 30px;
    object-fit: contain;
}

.mobile-logo-text {
    color: #FFFFFF;
}

.mobile-logo-text p {
    font-size: 14px;
    line-height: 1.6;
    margin: 0;
}

.mobile-menu-close {
    background: transparent;
    border: none;
    color: #FFFFFF;
    font-size: 36px;
    font-weight: 100;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.3s ease;
}

.mobile-menu-close:hover {
    opacity: 0.7;
}

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

.mobile-nav-list li {
    margin-bottom: 20px;
}

.mobile-nav-link {
    color: #FFFFFF;
    text-decoration: none;
    font-size: 20px;
    font-weight: 400;
    display: block;
    transition: opacity 0.3s ease;
}

.mobile-nav-link:hover {
    opacity: 0.7;
}

/* Hero Section */
.hero {
    position: relative;
    width: 100%;
    margin-top: 50px;
    overflow: hidden;
}

.hero-background {
    position: relative;
    width: 100%;
    z-index: 1;
}

.hero-image {
    width: 100%;
    height: auto;
    display: block;
    opacity: 0;
    transition: opacity 1s ease-in-out;
}

.hero-image img {
    width: 100%;
    height: auto;
    display: block;
}

.hero-image.active {
    position: relative;
    opacity: 1;
}

.hero-image:not(.active) {
    position: absolute;
    top: 0;
    left: 0;
}

.hero-progress-container {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background-color: rgba(255, 255, 255, 0.3);
    z-index: 3;
}

.hero-progress-bar {
    height: 100%;
    width: 0%;
    background-color: #465940;
    transition: width 0.1s linear;
}

.hero-content {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.hero-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
}

.hero-title-main {
    font-size: 120px;
    font-weight: 900;
    color: var(--color-very-dark-green);
    line-height: 1;
}

.hero-title-sub {
    font-size: 24px;
    font-weight: 400;
    color: var(--color-very-dark-green);
    writing-mode: vertical-rl;
    text-orientation: upright;
}

/* Section Styles */
.section {
    padding: 80px 0;
    background-color: var(--color-dark-green);
}

/* Supplement Container */
.supplement-container {
    max-width: 943px;
    margin: 0 auto;
    padding: 0 40px;
}

/* Bodypoint Container */
.bodypoint-container {
    max-width: 943px;
    margin: 0 auto;
    padding: 0 40px;
}

/* Message Container */
.message-container {
    max-width: 943px;
    margin: 0 auto;
    padding: 0 40px;
}

.section-title {
    font-size: 48px;
    font-weight: 700;
    color: var(--color-white);
    text-align: center;
    margin-bottom: 30px;
    letter-spacing: 0.1em;
}

.section-subtitle {
    font-size: 24px;
    font-weight: 500;
    color: var(--color-white);
    text-align: center;
    margin-bottom: 40px;
}

.section-text {
    font-size: 18px;
    color: var(--color-white);
    line-height: 2;
    margin-bottom: 40px;
    text-align: left;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

.section-text p {
    margin-bottom: 20px;
}

/* Product Box */
.product-box {
    background-color: var(--color-light-grey-green);
    padding: 60px 40px;
    border-radius: 0;
    display: flex;
    gap: 40px;
    align-items: stretch; /* 写真の高さに合わせてコンテンツも伸縮 */
    margin: 20px -40px;
    width: calc(100% + 80px);
    max-width: calc(100% + 80px);
}

.product-image-wrapper {
    flex: 0 0 300px;
}

.product-image {
    width: 100%;
    height: auto;
    border-radius: 0;
    display: block;
}

.product-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 100%; /* 写真の高さに合わせる */
}

.btn-wrapper {
    display: flex;
    justify-content: center;
    margin-top: auto;
}

.btn-wrapper-right {
    justify-content: flex-end;
    margin-top: 20px;
}

.btn-wrapper-center {
    justify-content: center;
    margin-top: 20px;
}

.product-name {
    font-size: 18px;
    font-weight: 700;
    color: var(--color-very-dark-green);
    margin-bottom: 20px;
}

.product-description {
    font-size: 18px;
    font-weight: 400;
    color: var(--color-very-dark-green);
    line-height: 2;
    margin-bottom: 15px;
}

/* Button */
.btn {
    display: inline-block;
    padding: 12px 30px;
    background-color: var(--color-white);
    color: var(--color-very-dark-green);
    text-decoration: none;
    border: none;
    border-radius: 0;
    font-size: 18px;
    font-weight: 700;
    transition: all 0.3s ease;
    cursor: pointer;
}

.btn:hover {
    background-color: var(--color-dark-green);
    color: #FFFFFF;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* Supplement Section */
.supplement-section {
    background-color: #142601;
    padding-top: 80px; /* KVから大見出しまでは80px */
}

.supplement-section .section-title {
    text-align: left;
}

/* SUPPLEMENT見出し - 64px、ボールド */
.supplement-section .section-title:first-of-type {
    font-size: 64px;
    font-weight: 700;
    margin-bottom: 20px; /* 大見出しから中見出しまで20px */
}

/* クマイ笹の効能について - 32px、ミディアム */
.supplement-section .section-title:not(:first-of-type) {
    font-size: 20px;
    font-weight: 500;
    margin-top: 60px; /* 商品ボックスから見出しへの余白（大きい） */
    margin-bottom: 30px; /* 見出しからテキストまで30px */
}

.supplement-section .section-subtitle {
    text-align: left;
    font-size: 32px;
    font-weight: 500;
    margin-bottom: 30px; /* 中見出しからテキストまで30px */
}

.supplement-section .section-text {
    text-align: left;
    font-size: 18px;
    font-weight: 400;
    color: #000000;
    margin-bottom: 40px; /* テキストから次の要素への余白 */
}

/* SUPPLEMENTセクションの最初のテキスト（「人間は、体の中に生息している細菌によって生かされている」）は白 */
.supplement-section .section-subtitle + .section-text {
    color: #FFFFFF;
}

/* 「クマイ笹の効能について」の下のテキスト（「医食同源」）は白 */
.supplement-section .section-title:not(:first-of-type) + .section-text {
    color: #FFFFFF;
}

.supplement-section .product-name {
    color: #000000;
}

.supplement-section .product-description {
    color: #000000;
}

/* Bodypoint Section */
.bodypoint-section {
    background: linear-gradient(
        80deg, rgba(235, 236, 233, 0.1) 0%, rgba(255, 255, 255, 100));
    padding-top: 80px; /* 前のセクションから大見出しまでは80px */
}

.bodypoint-section .section-title {
    text-align: left;
    color: #000000;
}

/* BODY POINT見出し - 64px、ボールド */
.bodypoint-section .section-title:first-of-type {
    font-size: 64px;
    font-weight: 700;
    margin-bottom: 20px; /* 大見出しから中見出しまで20px */
}

/* BODYPOINT=自然体 - 32px、ミディアム */
.bodypoint-section .section-title:not(:first-of-type) {
    font-size: 20px;
    font-weight: 500;
    margin-top: 60px; /* 商品ボックスから見出しへの余白（大きい） */
    margin-bottom: 30px; /* 見出しからテキストまで30px */
}

.bodypoint-section .section-text {
    text-align: left;
    font-size: 18px;
    font-weight: 400;
    color: #000000;
    margin-bottom: 40px; /* テキストから次の要素への余白 */
}

/* BODY POINT Section */
.bodypoint-section {
    padding-top: 80px; /* 前のセクションから大見出しまでは80px */
}

.bodypoint-product-box {
    background-color: #142601;
}

.bodypoint-product-box .product-name {
    color: #FFFFFF;
}

.bodypoint-product-box .product-description {
    color: #FFFFFF;
}

/* Message Section */
.message-section {
    background-color: #142601;
}

.message-section .section-title {
    text-align: left;
    font-size: 64px;
    font-weight: 700;
    margin-bottom: 20px; /* 大見出しから中見出しまで20px */
}

.message-section .section-subtitle {
    text-align: left;
    font-size: 32px;
    font-weight: 500;
    margin-bottom: 30px; /* 中見出しからテキストまで30px */
}

.message-box {
    background-color: var(--color-light-grey-green);
    padding: 60px 40px;
    border-radius: 0;
    display: flex;
    gap: 40px;
    align-items: flex-start;
    margin: 40px -40px;
    width: calc(100% + 80px);
    max-width: calc(100% + 80px);
}

.message-image-wrapper {
    flex: 0 0 300px;
}

.message-image {
    width: 100%;
    height: auto;
    border-radius: 0;
}

.message-content {
    flex: 1;
}

.message-text {
    font-size: 18px;
    color: #000000;
    line-height: 2;
    margin-bottom: 20px;
}

.message-signature {
    font-size: 18px;
    font-weight: 500;
    color: #000000;
    text-align: right;
    margin-top: 30px;
}

/* Clinic Menu Box */
.clinic-menu-box {
    background-color: var(--color-light-grey-green);
    padding: 60px 40px;
    display: flex;
    gap: 40px;
    margin: 40px -40px;
    width: calc(100% + 80px);
    max-width: calc(100% + 80px);
}

.clinic-menu-item {
    flex: 1;
}

.clinic-menu-title {
    font-size: 24px;
    font-weight: 700;
    color: #000000;
    margin-bottom: 15px;
}

.clinic-menu-text {
    font-size: 18px;
    font-weight: 400;
    color: #000000;
    line-height: 2;
    margin-bottom: 0;
}

.clinic-menu-text .underline {
    text-decoration: underline;
}

/* Clinic Images Box */
.clinic-images-box {
    display: flex;
    gap: 40px;
    margin: 40px -40px 80px;
    width: calc(100% + 80px);
    max-width: calc(100% + 80px);
    align-items: flex-start;
}

.clinic-image-item {
    flex: 1;
}

.clinic-image-item img {
    width: 100%;
    height: auto;
    display: block;
}

@media (max-width: 1024px) {
    .clinic-menu-box {
        flex-direction: column;
        gap: 30px;
    }

    .clinic-images-box {
        flex-direction: column;
        gap: 20px;
    }
}

/* Order Banner (supplement page, in content area) */
.order-banner-section {
    width: 100%;
    margin-top: 20px;
    line-height: 0;
}

.order-banner-image {
    width: 100%;
    height: auto;
    display: block;
    vertical-align: bottom;
}

/* Footer */
.footer {
    background-color: #465940;
    padding: 0px 0px 40px 0;
}

.footer-content {
    margin-bottom: 30px;
}

.footer-info {
    flex: 1;
}

.footer-company {
    font-size: 18px;
    font-weight: 500;
    color: var(--color-white);
    margin-bottom: 10px;
    padding-top:40px;
}

.footer-address,
.footer-contact {
    font-size: 16px;
    color: var(--color-white);
    margin-bottom: 5px;
}

.footer-contact a[href^="tel:"],
.footer-contact a {
    color: var(--color-white);
    text-decoration: none;
}

.footer-contact a[href^="tel:"]:hover,
.footer-contact a:hover {
    color: var(--color-white);
    text-decoration: none;
}

.footer-copyright {
    font-size: 14px;
    color: var(--color-white);
    text-align: center;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
}

/* Responsive Design - Tablet (1024px) */
@media (max-width: 1024px) {
    .hero-title {
        flex-direction: column;
        gap: 20px;
    }

    .hero-title-main {
        font-size: 80px;
    }

    .section-title {
        font-size: 36px;
    }

    .product-box {
        flex-direction: column;
        text-align: left;
        gap: 30px;
    }

    .product-image-wrapper {
        flex: 0 0 auto;
        width: 100%;
        max-width: 100%;
    }

    .product-content {
        text-align: left;
    }

    .btn-wrapper {
        justify-content: center;
    }

    .message-box {
        flex-direction: column;
        text-align: left;
        gap: 30px;
    }

    .message-image-wrapper {
        flex: 0 0 auto;
        width: 100%;
        max-width: 100%;
        margin: 0 auto;
    }

    .message-content {
        text-align: left;
    }

    .message-signature {
        text-align: right;
    }
}

/* Responsive Design - Mobile (1090px) */
@media (max-width: 1090px) {
    .header-container {
        position: relative;
        padding: 10px 20px;
    }

    .logo {
        flex: 0 0 auto;
    }

    .logo-icon {
        width: 100px;
        height: 100px;
        max-height: 35px;
        width: auto;
    }

    .nav {
        display: none;
    }

    .header-phone-pc {
        display: none;
    }

    .header-container {
        justify-content: space-between;
    }

    .header-mobile-group {
        display: flex;
    }

    .header-phone-icon {
        display: flex;
        margin-right: 0;
    }

    .hamburger-menu {
        display: flex;
        margin-left: 0;
    }

    /* SP版フォントサイズ調整 */
    .section-title {
        font-size: 32px;
    }

    .section-subtitle {
        font-size: 20px;
    }

    .section-text {
        font-size: 18px;
    }

    .product-name {
        font-size: 18px;
    }

    .product-description {
        font-size: 18px;
    }

    .btn {
        font-size: 18px;
    }

    .message-text {
        font-size: 18px;
    }

    .message-signature {
        font-size: 18px;
    }

    /* SUPPLEMENT Section SP版 */
    .supplement-section .section-title:first-of-type {
        font-size: 32px;
    }

    .supplement-section .section-subtitle {
        font-size: 20px;
    }

    .supplement-section .section-title:not(:first-of-type) {
        font-size: 20px;
    }

    /* BODY POINT Section SP版 */
    .bodypoint-section {
        background: linear-gradient(
            80deg, rgba(235, 236, 233, 0.1) 0%, rgba(255, 255, 255, 100));
    }

    .bodypoint-section .section-title:first-of-type {
        font-size: 32px;
        margin-bottom: 20px;
    }

    .bodypoint-section .section-title:not(:first-of-type) {
        font-size: 20px;
    }

    /* MESSAGE Section SP版 */
    .message-section .section-title {
        font-size: 32px;
    }

    .message-section .section-subtitle {
        font-size: 20px;
    }

    /* 商品ボックス SP版縦並び */
    .product-box {
        flex-direction: column;
        text-align: left;
        gap: 20px;
        width: calc(100% + 80px);
        max-width: calc(100% + 80px);
    }

    .product-image-wrapper {
        width: 100%;
        max-width: 100%;
    }

    .product-content {
        text-align: left;
    }

    .btn-wrapper {
        justify-content: center;
        margin-top: 15px;
    }

    /* メッセージボックス SP版縦並び */
    .message-box {
        flex-direction: column;
        text-align: left;
        gap: 20px;
        margin: 20px -40px;
        width: calc(100% + 80px);
        max-width: calc(100% + 80px);
        padding: 60px 40px;
    }

    .message-image-wrapper {
        width: 100%;
        max-width: 100%;
        margin: 0 auto;
    }

    .message-content {
        text-align: left;
    }

    .message-signature {
        text-align: right;
        margin-top: 20px;
    }

    /* コンテナのパディング調整 */
    .supplement-container,
    .bodypoint-container,
    .message-container {
        padding: 0 40px;
    }

    /* セクションのパディング調整 */
    .section {
        padding: 60px 0;
    }

    .logo-text {
        font-size: 18px;
    }

    .header-container {
        gap: 15px;
    }

    .nav-list {
        flex-wrap: wrap;
        justify-content: center;
        gap: 15px;
    }

    .hero-title {
        flex-direction: column;
        gap: 15px;
    }

    .hero-title-main {
        font-size: 60px;
    }

    .hero-title-sub {
        font-size: 18px;
    }

    .section {
        padding: 60px 0;
    }

    .section-title {
        font-size: 28px;
    }

    .section-subtitle {
        font-size: 18px;
    }



    .footer-content {
        margin-bottom: 20px;
    }

    .footer-copyright {
        text-align: center;
        padding-top: 15px;
    }
}

/* Company Page Styles */
.page-title-section {
    background-color: #142601;
    padding: 80px 0 60px 0;
    margin-top: 60px;
}

.page-title-container {
    max-width: 943px;
    margin: 0 auto;
    padding: 0 20px;
    text-align: left;
}

.page-title {
    font-size: 64px;
    font-weight: 700;
    color: #FFFFFF;
}

.company-main {
    background-color: #B8BFBE;
    padding: 60px 0;
}

.company-container {
    max-width: 943px;
    margin: 0 auto;
    padding: 0 20px;
}

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

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

.company-section-title {
    font-size: 32px;
    font-weight: 700;
    color: #000000;
    margin-bottom: 30px;
}

.company-box {
    background-color: #FFFFFF;
    padding: 40px;
    border-radius: 0;
}

.company-info-grid {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 20px 40px;
    align-items: start;
    position: relative;
}

.company-info-grid::before {
    content: "";
    position: absolute;
    left: 200px;
    top: 0;
    bottom: 0;
    width: 1px;
    background-color: #000000;
}

.company-info-label {
    font-size: 24px;
    font-weight: 700;
    color: #000000;
    text-align: left;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.company-info-divider {
    display: none;
}

.company-info-value {
    font-size: 18px;
    font-weight: 400;
    color: #000000;
    line-height: 2;
}

.company-info-value a[href^="tel:"],
.company-info-value a {
    color: #000000;
    text-decoration: none;
}

.company-info-value a[href^="tel:"]:hover,
.company-info-value a:hover {
    color: #000000;
    text-decoration: none;
}

.history-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    position: relative;
}

.history-item {
    display: flex;
    gap: 40px;
    align-items: flex-start;
    position: relative;
    padding: 20px 0;
}

.history-year {
    font-size: 24px;
    font-weight: 700;
    color: #000000;
    min-width: 80px;
    flex-shrink: 0;
    line-height: 1.6;
    display: flex;
    align-items: center;
}

.history-year::before {
    content: "●";
    color: #000000;
    font-size: 12px;
    margin-right: 20px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    line-height: 1;
}

.history-text {
    font-size: 18px;
    font-weight: 400;
    color: #000000;
    line-height: 1.6;
    flex: 1;
    padding-top: 0.15em;
}

.contact-info {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.contact-company,
.contact-tel,
.contact-email {
    font-size: 18px;
    font-weight: 700;
    color: #000000;
    line-height: 1.6;
}

.contact-tel a[href^="tel:"],
.contact-email a[href^="mailto:"],
.contact-tel a,
.contact-email a {
    color: #000000;
    text-decoration: none;
}

.contact-tel a[href^="tel:"]:hover,
.contact-email a[href^="mailto:"]:hover,
.contact-tel a:hover,
.contact-email a:hover {
    color: #000000;
    text-decoration: none;
}

/* Supplement Page Styles */
.supplement-main {
    background-color: #B8BFBE;
    padding: 60px 0;
}

.supplement-container-page {
    max-width: 850px;
    margin: 0 auto;
    padding: 0 20px;
}

.supplement-grid {
    display: flex;
    flex-direction: column;
    gap: 60px;
}

.supplement-item {
    background-color: transparent;
    border-radius: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    width: 100%;
}

.supplement-image-wrapper {
    width: 100%;
    aspect-ratio: 15/9;
    overflow: hidden;
    background-color: #B8BFBE;
    display: flex;
    align-items: center;
    justify-content: center;
}

.supplement-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.supplement-item-title {
    font-size: 20px;
    font-weight: 700;
    color: #000000;
    margin: 20px 20px 10px 20px;
    line-height: 1.4;
}

.supplement-item-text {
    font-size: 18px;
    font-weight: 400;
    color: #000000;
    line-height: 1.8;
    margin: 0 20px 20px 20px;
    flex: 1;
}

/* 価格並び */
.price-row{
  display: inline-flex;
  gap: 12px;
}

/* スマホでは縦並び */
@media (max-width:500px){

  .price-row{
    display:flex;
    flex-direction:column;
    gap:4px;
  }

}


/* Responsive Design - Company Page */
@media (max-width: 1024px) {
    .company-info-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .company-info-grid::before {
        display: none; /* 会社概要の中の縦線を消す */
    }

    .company-info-divider {
        display: none;
    }

    .company-info-label {
        text-align: left;
        justify-content: flex-start;
    }

    .supplement-grid {
        gap: 30px;
    }
}

/* Supplement PDF Button */
.supplement-pdf-btn {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #FFFFFF;
    padding: 20px 40px;
    border-radius: 0;
    text-align: center;
    text-decoration: none;
    transition: all 0.3s ease;
    cursor: pointer;
    margin-top: 20px;
    max-width: 350px;
    margin-left: auto;
    margin-right: auto;
}

.supplement-pdf-btn:hover {
    background-color: #465940;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.supplement-pdf-btn:hover .supplement-pdf-title,
.supplement-pdf-btn:hover .supplement-pdf-link {
    color: #FFFFFF;
}

.supplement-pdf-title {
    display: block;
    font-size: 18px;
    font-weight: 700;
    color: #142601;
}

.supplement-pdf-link {
    display: block;
    font-size: 16px;
    font-weight: 400;
    color: #142601;
    text-decoration: none;
}

/* Bodypoint Page Styles */
.bodypoint-main {
    background-color: #B8BFBE;
    padding: 60px 0;
}

.bodypoint-container-page {
    max-width: 943px;
    margin: 0 auto;
    padding: 0 20px;
}

.bodypoint-content {
    display: flex;
    gap: 40px;
    align-items: flex-start;
}

.bodypoint-logo-wrapper {
    flex: 0 0 300px;
    display: flex;
    align-items: stretch;
}

.bodypoint-logo-image {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
}

.bodypoint-info-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 30px;
    align-items: stretch;
}

.bodypoint-pdf-btn {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #142601;
    padding: 30px;
    border-radius: 0;
    text-align: center;
    text-decoration: none;
    transition: all 0.3s ease;
    cursor: pointer;
    flex: 0 0 auto;
}

.bodypoint-pdf-btn:hover {
    background-color: #465940;
    color: #FFFFFF;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.bodypoint-pdf-title {
    display: block;
    font-size: 22px;
    font-weight: 700;
    color: #FFFFFF;
    margin-bottom: 10px;
}

.bodypoint-pdf-link {
    display: block;
    font-size: 18px;
    font-weight: 400;
    color: #FFFFFF;
    text-decoration: none;
}

.bodypoint-info-box {
    background-color: #FFFFFF;
    padding: 40px;
    border-radius: 0;
}

.bodypoint-info-title {
    font-size: 18px;
    font-weight: 700;
    color: #000000;
    margin-bottom: 20px;
    text-align: center;
}

.bodypoint-patent-image {
    margin-bottom: 20px;
    text-align: center;
}

.bodypoint-patent-image img {
    max-width: 250px;
    height: auto;
    display: block;
    margin: 0 auto;
}

@media (max-width: 1024px) {
    .bodypoint-patent-image img {
        max-width: 100%;
    }
}

.bodypoint-info-content {
    font-size: 18px;
}

.bodypoint-supervisor {
    font-size: 14px;
    font-weight: 400;
    color: #000000;
    margin-bottom: 15px;
    line-height: 1.6;
}

.bodypoint-text {
    font-size: 14px;
    font-weight: 400;
    color: #000000;
    line-height: 1.6;
    margin-bottom: 15px;
}

.bodypoint-text:last-child {
    margin-bottom: 0;
}

/* Responsive Design - Bodypoint Page */
@media (max-width: 1024px) {
    .bodypoint-content {
        flex-direction: column;
        gap: 30px;
    }

    .bodypoint-logo-wrapper {
        flex: 0 0 auto;
        max-width: 300px;
        margin: 0 auto;
    }
}

@media (max-width: 500px) {
    .bodypoint-info-box {
        padding: 20px;
    }

    .bodypoint-info-title {
        font-size: 24px;
    }
}

@media (max-width: 500px) {
    .page-title {
        font-size: 36px;
    }

    .company-section-title {
        font-size: 32px; /* 会社概要見出し32px */
    }

    .company-info-label {
        font-size: 24px; /* 商号や設立など24px */
    }

    .company-info-value {
        font-size: 18px; /* 株式会社 恒徳KOUTOKU Co.,Ltd.など16px */
    }

    .company-info-grid::before {
        display: none; /* 会社概要の中の縦線を消す */
    }

    .company-box {
        padding: 20px;
    }

    .history-item {
        flex-direction: column;
        gap: 0px; /* 沿革の中のgapを0px */
    }

    .history-text {
        font-size: 18px; /* .history-textのフォントサイズ16px */
    }

    .contact-info {
        gap: 3px; /* .contact-infoのgap3px */
    }

    .contact-tel,
    .contact-email {
        font-size: 18px; /* お問い合わせのTELとメールのフォントサイズ16px */
    }

    .history-year {
        min-width: auto;
    }
}

/* Events Page Styles */
.events-main {
    background-color: #B8BFBE;
    padding: 60px 0;
}

.events-container-page {
    max-width: 850px;
    margin: 0 auto;
    padding: 0 20px;
}

.events-section-title {
    font-size: 64px;
    font-weight: 700;
    color: #000000;
    margin-bottom: 20px;
}

.events-section-title:not(:first-child) {
    margin-top: 60px;
}

.events-list {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.event-item {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 20px;
}

.event-video-wrapper {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    height: 0;
    overflow: hidden;
    background-color: #000000;
    border-radius: 0;
    cursor: pointer;
}

.event-thumbnail {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.event-thumbnail-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.event-play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    transition: transform 0.2s ease;
    z-index: 1;
}

.event-play-button:hover {
    transform: translate(-50%, -50%) scale(1.1);
}

.event-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

.event-description {
    font-size: 24px;
    font-weight: 400;
    color: #000000;
    line-height: 1.6;
    text-align: center;
}

/* Events PDF Section */
.events-pdf-list {
    display: flex;
    gap: 40px;
    margin-top: 20px;
}

.event-pdf-item {
    flex: 1;
}

.event-pdf-link {
    display: block;
    width: 100%;
    transition: opacity 0.3s ease;
}

.event-pdf-link:hover {
    opacity: 0.8;
}

.event-pdf-image {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 0;
}

/* Responsive Design - Events Page */
@media (max-width: 1024px) {
   .events-section-title {
    font-size: 32px;
    font-weight: 700;
    color: #000000;
    margin-bottom: 20px;
}

   .events-section-title:not(:first-child) {
    margin-top: 60px;
}

    .events-list {
        gap: 30px;
    }

    .event-description {
        text-align: left;
    }
}

@media (max-width: 500px) {
    .events-section-title {
        font-size: 20px;
    }

    .event-description {
        font-size: 18px;
    }

    .events-pdf-list {
        flex-direction: column;
        gap: 30px;
    }
}

/* Voice Page Styles */
.voice-main {
    background-color: #B8BFBE;
    padding: 60px 0;
}

.voice-container-page {
    max-width: 943px;
    margin: 0 auto;
    padding: 0 20px;
}

.voice-section-title {
    font-size: 32px;
    font-weight: 700;
    color: #000000;
    margin-bottom: 20px;
}

.voice-list {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.voice-item {
    margin-bottom: 20px;
}

.voice-box {
    background-color: #FFFFFF;
    padding: 40px;
    border-radius: 0;
}

.voice-customer-header-box {
    display: flex;
    gap: 25px;
    align-items: center;
    margin-bottom: 20px;
}

.voice-icon-wrapper {
    flex: 0 0 41px;
}

.voice-icon {
    width: 41px;
    height: 51px;
    object-fit: contain;
    display: block;
}

.voice-customer-info-group {
    flex: 1;
}

.voice-number {
    font-size: 24px;
    font-weight: 700;
    color: #000000;
    margin-bottom: 10px;
}

.voice-customer-info {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.voice-customer-name {
    font-size: 20px;
    font-weight: 700;
    color: #000000;
}

.voice-customer-condition {
    font-size: 18px;
    font-weight: 700;
    color: #000000;
    margin-bottom: 0;
}

.voice-products {
    font-size: 20px;
    font-weight: 700;
    color: #000000;
}

.voice-content {
    font-size: 18px;
    font-weight: 400;
    color: #000000;
    line-height: 2;
}

.voice-content p {
    margin-bottom: 0;
}

.voice-content p:last-child {
    margin-bottom: 0;
}

.voice-content strong {
    font-weight: 700;
    color: #465940;
}

.voice-bold-color {
    font-weight: 700;
    color: #465940;
}

.voice-bold-underline {
    font-weight: 700;
    color: #465940;
    text-decoration: underline;
}

.voice-note {
    font-size: 16px;
    color: #000000;
    text-align: left;
}

/* Responsive Design - Voice Page */
@media (max-width: 1024px) {
    .voice-list {
        gap: 30px;
    }
}

@media (max-width: 899px) {
    .voice-box {
        padding: 20px;
    }

    .voice-number {
        font-size: 20px;
    }

    .voice-customer-name,
    .voice-products {
        font-size: 18px;
    }

    .voice-customer-condition {
        font-size: 18px;
    }

    .voice-customer-info {
        flex-direction: column;
        gap: 0;
    }
}

@media (max-width: 500px) {
    .voice-section-title {
        font-size: 20px;
    }

    .voice-content {
        font-size: 14px;
    }
}

/* Scroll to Top Button */
.scroll-to-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 50px;
    height: 50px;
    background-color: #142601;
    color: #FFFFFF;
    border: none;
    cursor: pointer;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: all 0.3s ease;
    font-size: 24px;
    font-weight: 700;
}

.scroll-to-top.show {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.scroll-to-top:hover {
    background-color: #465940;
    transform: translateY(-2px);
}

.scroll-to-top-arrow {
    display: block;
    line-height: 1;
}

@media (max-width: 899px) {
    .scroll-to-top {
        position: static;
        bottom: auto;
        top: auto;
        left: auto;
        right: auto;
        width: 40px;
        height: 40px;
        font-size: 20px;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        margin: 10px 10px 0px auto;
        display: flex;
    }

    .footer-company {
        padding-top: 0;
    }

/* 追記 */
@media (max-width: 500px) {
.section-text {
    font-size: 17px;
    line-height: 1.8;
    }

.product-description {
    font-size: 17px;
    font-weight: 400;
    line-height: 1.8;
    margin-bottom: 10px;
    }


.supplement-item-text {
    font-size: 17px;
    }

}

}