@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500&family=Noto+Serif+JP:wght@300;400;600&display=swap');

/* カラーパレット定義 (ロゴから抽出・調整) */
:root {
    --color-primary: #5ABCB9;       
    --color-primary-light: #A5E4E2; 
    --color-primary-dark: #2C8C89;  
    --color-secondary: #9CA3AF;     
    --color-secondary-light: #E5E7EB;
    --color-text-main: #374151;     
    --color-text-sub: #6B7280;      
    --color-bg-body: #FFFFFF;
    --color-bg-sub: #F3F9FA;
}

/* 基本設定 */
body {
    font-family: 'Noto Sans JP', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: var(--color-text-main);
    line-height: 1.9;
    background-color: var(--color-bg-body);
    overflow-x: hidden;
}

h1, h2, h3, .font-serif {
    font-family: 'Noto Serif JP', serif;
}

a {
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* -------------------------------------------
   アニメーション用ユーティリティ
------------------------------------------- */

/* 画像リビールコンテナ */
.img-reveal-container {
    overflow: hidden;
    position: relative;
    /* パララックス用に高さを少し余分に持たせる場合があるが、今回はJSで制御 */
}

.img-reveal-img {
    will-change: transform;
    transform: scale(1.2); 
    width: 100%;
    height: 120%; /* パララックス移動幅を確保 */
    object-fit: cover;
}

/* 文字分割 */
.char-split {
    display: inline-block;
    will-change: transform, opacity;
}

/* 背景装飾（浮遊する水滴） */
.floating-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    z-index: 0;
    opacity: 0.4;
    pointer-events: none;
    will-change: transform;
}

/* ラインアニメーション用 */
.anim-line {
    width: 0;
    height: 1px;
    background-color: var(--color-primary);
    margin-top: 1rem;
    will-change: width;
}

.anim-line-vertical {
    height: 0;
    width: 1px;
    background-color: var(--color-secondary);
    position: absolute;
    left: 15px; /* 数字の中央に合わせる調整 */
    top: 40px;
    bottom: 0;
    z-index: 0;
    will-change: height;
}

/* -------------------------------------------
   セクションごとのスタイル
------------------------------------------- */

/* ヒーローエリア */
.hero-section {
    position: relative;
    height: 100vh;
    overflow: hidden;
    display: flex;
    align-items: center;
}

.hero-bg-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?ixlib=rb-4.0.3&auto=format&fit=crop&w=2070&q=80');
    background-size: cover;
    background-position: center;
    z-index: -1;
    will-change: transform; /* パララックス用 */
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(255,255,255,0.85) 0%, rgba(243,249,250,0.7) 100%);
    z-index: -1;
}

/* ロゴ画像のブレンドモード */
.logo-img {
    /* SVGに変更したためブレンドモードは不要だが念のため残す */
}

/* Company Table */
.company-table th {
    color: var(--color-primary-dark);
    font-weight: 500;
    padding-top: 1.8rem;
    padding-bottom: 1.8rem;
    border-bottom: 1px solid var(--color-secondary-light);
}
.company-table td {
    padding-top: 1.8rem;
    padding-bottom: 1.8rem;
    border-bottom: 1px solid var(--color-secondary-light);
}
.company-table tr:last-child th, 
.company-table tr:last-child td {
    border-bottom: none;
}

/* ボタンのエフェクト */
.btn-hover-effect {
    position: relative;
    overflow: hidden;
    transition: all 0.5s ease;
}
.btn-hover-effect::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255,255,255,0.2);
    transform: translateX(-100%) skewX(-15deg);
    transition: transform 0.6s ease;
}
.btn-hover-effect:hover::before {
    transform: translateX(100%) skewX(-15deg);
}

/* カスタムスクロールバー */
::-webkit-scrollbar {
    width: 6px;
}
::-webkit-scrollbar-track {
    background: #FAFAFA;
}
::-webkit-scrollbar-thumb {
    background: var(--color-secondary);
    border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--color-primary);
}