/* 
 * value.css
 * 価値観ページの専用スタイル
 */

/* Brand Statement */
.value-brand-card {
    background: linear-gradient(135deg, #505050 0%, #363636 40%, #2a2a2a 100%);
    border-radius: 1.5rem;
}

.value-brand-subtitle {
    font-size: 0.85rem;
    letter-spacing: 0.15em;
    color: rgba(255, 255, 255, 0.7) !important;
}

.value-brand-title {
    font-size: clamp(1.8rem, 4vw, 2.8rem);
    letter-spacing: 0.05em;
    color: #ffffff;
}

.value-brand-highlight {
    color: #f45d28;
}

.value-brand-desc {
    opacity: 0.9;
    letter-spacing: 0.02em;
    color: #ffffff;
}

/* Origin & View Cards */
.value-origin-card {
    border-radius: 1.5rem;
}

.value-origin-subtitle {
    font-size: 0.85rem;
}

.value-origin-title {
    font-size: 1.8rem;
    letter-spacing: -0.02em;
}

/* Action Guidelines Card */
.value-action-card {
    border-radius: 1.5rem;
    overflow: hidden;
}

/* IT Speech Bubble */
.it-bubble-container {
    position: relative;
    display: inline-block;
}

.it-speech-bubble {
    position: absolute;
    top: 130%;
    left: 50%;
    transform: translateX(-20%);
    background-color: #f45d28;
    color: #fff;
    padding: 0.3rem 1rem;
    border-radius: 20px;
    font-size: 1rem;
    font-weight: 700;
    white-space: nowrap;
    letter-spacing: 0.05em;
    box-shadow: 0 4px 10px rgba(244, 93, 40, 0.3);
    z-index: 10;
}

.it-speech-bubble::after {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 20%;
    transform: translateX(-50%);
    border-width: 8px;
    border-style: solid;
    border-color: transparent transparent #f45d28 transparent;
}

/* CTA Buttons */
.btn-value-primary {
    background-color: #2b3445;
    border-color: #2b3445;
    color: #ffffff;
}
.btn-value-primary:hover {
    background-color: #3f4d66;
    border-color: #3f4d66;
    color: #ffffff;
}
.btn-outline-value {
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    color: #2b3445;
}
.btn-outline-value:hover {
    border-color: #2b3445;
    color: #2b3445;
}