@charset "UTF-8";

body {
	font-family: 'Inter', sans-serif;
	background-color: #f8fafc;
	/* Tailwind: bg-slate-50 */
	color: #38455e;
	/* Adjusted to a darker gray: text-gray-700 */
}

.main-content-container {
	/* クラス名を変更 */
	max-width: 1200px;
	/* 1200px から 1024px に変更して、読みやすさを改善 */
}

/* Custom styles for subtle shadow and rounded corners */
.card {
	background-color: #ffffff;
	border-radius: 1rem;
	/* rounded-xl */
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
	/* shadow-md */
}

/* Primary button color adjusted to #2563eb */
.btn-primary {
	background-color: #2563eb;
	/* Adjusted to #2563eb */
	color: #ffffff;
	padding: 0.75rem 1.5rem;
	border-radius: 0.5rem;
	/* rounded-lg */
	font-weight: 600;
	transition: background-color 0.3s ease;
}

.btn-primary:hover {
	background-color: #1d4ed8;
	/* Darker shade for hover (Tailwind blue-700) */
}

.btn-secondary {
	background-color: #e2e8f0;
	/* Tailwind: bg-slate-200 */
	color: #374151;
	/* Adjusted to text-gray-700 */
	padding: 0.75rem 1.5rem;
	border-radius: 0.5rem;
	/* rounded-lg */
	font-weight: 600;
	transition: background-color 0.3s ease;
}

.btn-secondary:hover {
	background-color: #cbd5e1;
	/* Tailwind: bg-slate-300 */
}

/* three.js canvas fills its parent */
#three-canvas {
	display: block;
	width: 100%;
	height: 100%;
}

#logomark{
    fill: #1962AE;
}


        /* Timeline specific styles */
        .timeline {
            position: relative;
            padding: 20px 0;
        }
        .timeline::before {
            content: '';
            position: absolute;
            left: 50%;
            top: 0;
            bottom: 0;
            width: 4px;
            background: #e2e8f0; /* slate-200 */
            transform: translateX(-50%);
            border-radius: 2px;
        }
        .timeline-item {
            display: flex;
            justify-content: space-between;
            margin-bottom: 40px;
            position: relative;
        }
        .timeline-item:nth-child(odd) {
            flex-direction: row-reverse;
        }
        .timeline-item:nth-child(even) {
            flex-direction: row;
        }
        .timeline-item-content {
            width: calc(50% - 30px); /* Adjust for dot and line */
            padding: 20px;
            background-color: #ffffff;
            border-radius: 1rem;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
            position: relative;
        }
        .timeline-item-content::before {
            content: '';
            position: absolute;
            top: 25px;
            width: 0;
            height: 0;
            border-style: solid;
        }
        .timeline-item:nth-child(odd) .timeline-item-content::before {
            left: 100%;
            border-width: 10px 0 10px 10px;
            border-color: transparent transparent transparent #ffffff;
        }
        .timeline-item:nth-child(even) .timeline-item-content::before {
            right: 100%;
            border-width: 10px 10px 10px 0;
            border-color: transparent #ffffff transparent transparent;
        }
        .timeline-dot {
            position: absolute;
            left: 50%;
            top: 25px;
            width: 20px;
            height: 20px;
            background-color: #2563eb; /* blue-600 */
            border-radius: 50%;
            transform: translateX(-50%);
            z-index: 10;
            border: 3px solid #f8fafc; /* bg-slate-50 */
        }
        .timeline-date {
            width: calc(50% - 30px);
            text-align: center;
            font-weight: 600;
            color: #2563eb; /* blue-600 */
            padding-top: 20px;
        }

        /* Mobile adjustments for timeline */
        @media (max-width: 767px) {
            .timeline::before {
                left: 20px;
                transform: translateX(0);
            }
            .timeline-item {
                flex-direction: column !important; /* Force column for mobile */
                align-items: flex-start;
            }
            .timeline-item-content {
                width: calc(100% - 60px); /* Adjust for left line and padding */
                margin-left: 60px;
            }
            .timeline-item-content::before {
                left: -10px;
                top: 25px;
                border-width: 10px 10px 10px 0;
                border-color: transparent #ffffff transparent transparent;
            }
            .timeline-item:nth-child(odd) .timeline-item-content::before {
                left: -10px; /* Ensure it's always on the left for mobile */
                border-width: 10px 10px 10px 0;
                border-color: transparent #ffffff transparent transparent;
            }
            .timeline-item:nth-child(even) .timeline-item-content::before {
                left: -10px; /* Ensure it's always on the left for mobile */
                border-width: 10px 10px 10px 0;
                border-color: transparent #ffffff transparent transparent;
            }
            .timeline-dot {
                left: 20px;
                transform: translateX(-50%);
            }
            .timeline-date {
                width: 100%;
                text-align: left;
                padding-left: 60px; /* Align with content */
                padding-top: 0;
                margin-bottom: 10px;
            }
        }