@charset "utf-8";

.name-productss {
  font-size: 34px;
  font-weight: bold;
  line-height: 1em;  
  padding-top: 0;
  margin-bottom: 30px;
  margin-top: 30px;
}

.today-date {
width: 100%;   
text-align: right;
font-size: 15px;
}

 /* DESKTOP LAYOUT - Two Column: Image Left, Content Right */
        .profile-container {
            display: flex;
            align-items: flex-start;
            gap: 20px;
            margin-top: 20px;
            margin-bottom: 40px;
        }

        .profile-left {
            flex-shrink: 0;
        }

        .profile-left img {
            width: 300px;
            height: 200px;
            object-fit: cover;
            display: block;
        }

        .profile-right {
            flex: 1;
            /* padding: 20px; */
        }

        .position {
            font-size: 16px;
            color: #ff0000;
            margin-bottom: 8px;
        }

        .name {
            font-size: 20px;
            margin-bottom: 2px;
        }

        .dob {
            font-size: 14px;
        }

        .furigana {
            font-size: 14px;
        }

        /* .accordion {
            width: 100%;
        } */

        .accordion-btn {
            width: 100%;
            background: white;
            text-align: left;
            margin-top: 20px;
            margin-bottom: 14px;
            font-size: 15px;
            padding: 14px;
            border: 1px solid #ddd;
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            align-items: center;
            /* margin: 0; */
        }

        .accordion-btn::after {
            content: ""; 
            display: inline-block; 
            width: 16px;
            height: 16px;
            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6,9 12,15 18,9"></polyline></svg>') no-repeat center center;
            background-size: contain; 
            transition: transform 0.3s ease;
        }

        .accordion-btn.active::after {
            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="18,15 12,9 6,15"></polyline></svg>') no-repeat center center;
            background-size: contain;
        }

        .accordion-content {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.3s ease;
            /* background: white;
            border-left: 1px solid #ddd;
            border-right: 1px solid #ddd;
            border-bottom: 1px solid #ddd; */
        }

        .accordion-content ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .accordion-content li {
            font-size: 15px;
            margin-left: 14px;
            margin-bottom: 6px;
            display: flex;         
            align-items: flex-start;
            gap: 20px;             
        }

        .career-year {
            flex: 0 0 80px;         
        }

        .career-event {
            flex: 1;               
        }

        /* MOBILE LAYOUT - Stack: Image+Text on top, Accordion full width below */
        @media (max-width: 640px) {
            .today-date {
                font-size: 14px;
            }

            .profile-container {
                gap:10px;
                display: block; /* Change to block layout */
                background: white;
                margin-bottom: 10px;
                /* margin-bottom: 30px; */
                
            }

            .profile-header {
                display: flex;
                align-items: flex-start;
                gap: 10px;
                margin-top: 20px;
                /* padding: 15px 15px 10px 15px; */
            }

            .profile-left {
                flex-shrink: 0;
            }

            .profile-left img {
                width: 132px;
                height: 88px;
                object-fit: cover;
            }

            .profile-info {
                flex: 1;
            }

            .position {
                font-size: 14px;
                color: #ff0000;
                /* margin: 0 0 6px 0; */
                margin-bottom: 8px;
            }

            .name {
                font-size: 16px;
                /* margin: 0 0 2px 0; */
                margin-bottom: 2px;
            }

            .dob {
                font-size: 12px;
                /* margin: 0; */
            }

            .furigana {
                font-size: 12px;
            }

            .accordion {
                width: 100%;
                margin: 0;
                /* padding: 0 15px 15px 15px; */
            }

            .accordion-btn {
                margin-top: 10px;
                font-size: 15px;
                padding: 12px;
            }

            /* .accordion-content ul {
                padding: 12px;
            } */

            .accordion-content li {
                margin-left: 12px;
                font-size: 13px;
                gap: 15px;
            }

            .career-year {
                flex: 0 0 80px;
                font-size: 15px;
            }

            .career-event {
                font-size: 15px;
            }
        }