@charset "UTF-8";

/* --- Opening Animation (Black & Speed) --- */
.opening {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    /* ★黒(#000)からティファニーブルーへ変更し、清潔感とブランド感を強調 */
    background-color: var(--color-bg); 
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
}

.opening-logo img {
    width: 120px; /* 少し小さめに鋭く見せる */
    opacity: 0;
    /* 初期状態で少し縮小しておく（JSで拡大しながら出すため） */
    transform: scale(0.8); 
}

/* 第2の幕（変更：ティファニーブルー → 白） */
.opening-curtain {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    /* ▼ ここを変更しました */
    background-color: #ffffff; 
    
    z-index: 1; /* ロゴ(z-index:2想定)より後ろ、背景より前 */
    transform: translateY(100%); 
}

/* --- Main Visual --- */
.mv {
    position: relative;
    height: 100vh;
    width: 100%;
    overflow: hidden;
}

.mv-bg {
    width: 100%;
    height: 100%;
    position: relative;
}

.mv-bg video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

.mv-bg::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3); /* ★修正: 0.2 -> 0.3 少し濃くして文字をくっきり */
    z-index: 2;
}

.mv-content {
    position: absolute;
    top: 50%;
    left: 10%;
    transform: translateY(-50%);
    z-index: 3;
    color: #fff;
    text-shadow: 0 4px 20px rgba(0,0,0,0.4);
}

.mv-copy {
    /* ★修正: 4.5rem -> 5rem (PCでの圧倒的インパクト) */
    font-size: 5rem; 
    
    line-height: 1.4;
    margin-bottom: 30px;
    
    /* ★修正: 太さを最大化して動画に負けないように */
    font-weight: 700; 
}

.mv-sub {
    font-size: 1.2rem;
    letter-spacing: 0.2em;
    color: var(--color-primary);
    font-weight: 600;
}


/* --- Concept --- */
.concept-inner {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 50px;
}

.concept-vertical-text {
    writing-mode: vertical-rl;
    font-size: 1.3rem; /* ★修正: サイズアップ */
    color: var(--color-text-light);
    line-height: 2.5;
    height: 340px;
    font-weight: 500;
}

.concept-main-text {
    max-width: 600px;
    padding-top: 40px;
}

.lead-text {
    font-size: 1.8rem; /* ★修正: サイズアップ */
    font-weight: 700;
    margin-bottom: 35px;
    line-height: 1.8;
}

/* --- Service (Split Layout) --- */
.service {
    /* section-paddingを少し上だけにして、下は画像がピタッとつくように調整 */
    padding: 120px 0 0 0; 
}

.service-list {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.service-row {
    display: flex;
    width: 100%;
    /* 画像とテキストの高さを揃える */
    align-items: stretch; 
}

/* 偶数行目（2, 4番目）は、flexの並びを左右反転させる */
.service-row:nth-child(even) {
    flex-direction: row-reverse;
}

/* --- テキストエリア --- */
.service-text-wrap {
    width: 50%;
    background-color: #FAFAFA; /* ★黒からグレー寄りの白へ変更 */
    color: var(--color-text); /* ★文字を黒系へ変更 */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8% 5%;
    position: relative;
}

/* テキストエリアと画像の間にある「三角形」の装飾 */
.service-text-wrap::after {
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    border-top: 12px solid transparent;
    border-bottom: 12px solid transparent;
    z-index: 2;
}

/* 奇数行目（テキストが左）の三角形は、右側に出す */
.service-row:nth-child(odd) .service-text-wrap::after {
    right: -11px;
    border-left: 12px solid #FAFAFA; /* ★背景色に合わせる */
}

/* 偶数行目（テキストが右）の三角形は、左側に出す */
.service-row:nth-child(even) .service-text-wrap::after {
    left: -11px;
    border-right: 12px solid #FAFAFA; /* ★背景色に合わせる */
}

/* テキストの中身 */
.service-text {
    max-width: 400px;
    width: 100%;
}

.jp-title {
    font-size: 1.8rem;
    font-weight: 600;
    margin-bottom: 5px;
    letter-spacing: 0.1em;
}

.en-title {
    font-size: 0.9rem;
    color: var(--color-primary); /* ティファニーブルーでアクセント */
    letter-spacing: 0.15em;
    margin-bottom: 30px;
    font-family: sans-serif;
}

.service-text .desc {
    color: var(--color-text-light); /* ★文字色をグレーにして可読性アップ */
    font-size: 1rem;
    line-height: 1.8;
    margin-bottom: 40px;
}

/* 矢印リンク（ライト背景用） */
.service-text .arrow-link {
    color: var(--color-text); /* ★白から黒系へ変更 */
    font-weight: 500;
}

/* サービス導線ボタン（インスタ・ホットペッパー等の外部リンク用） */
.service-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 4px;
}

.service-btn {
    display: inline-flex;
    align-items: center;
    padding: 9px 24px;
    border: 1px solid var(--color-primary);
    border-radius: 4px;
    color: var(--color-text);
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    transition: all 0.3s ease;
}

.service-btn:hover {
    background-color: var(--color-primary);
    color: #fff;
}

/* --- 画像エリア --- */
.service-image {
    width: 50%;
    position: relative;
    overflow: hidden;
}

.service-image img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 枠に合わせてトリミング */
    display: block;
    transition: transform 0.8s ease;
}

.service-row:hover .service-image img {
    transform: scale(1.05); /* ホバーでゆっくり拡大 */
}

/* --- Recruit --- */
.recruit {
    /* ★ダークトーンから、清潔感のあるWhite（#FAFAFA）へ変更 */
    background-color: #FAFAFA; 
    color: var(--color-text); /* ★文字を黒系へ */
    padding: 140px 0;
    text-align: center;
}

.recruit-title {
    font-size: 3.8rem; 
    font-weight: 700;
    line-height: 1.4;
    margin-bottom: 40px;
    color: var(--color-text); /* ★白から黒系へ */
}

.recruit-msg {
    font-size: 1.2rem;
    line-height: 2.2;
    margin-bottom: 50px;
    color: var(--color-text-light); /* ★真っ黒ではなくグレーにして柔らかさを出す */
}

/* .recruit-categories span は既にティファニーブルーなのでそのまま生かします */

.btn-recruit {
    display: inline-block;
    background-color: transparent;
    color: var(--color-text); /* ★文字を黒系へ */
    padding: 18px 60px;
    font-size: 1.1rem;
    margin-top: 50px;
    border: 1px solid var(--color-text); /* ★ボーダーも黒系へ */
    transition: all 0.3s;
}

.btn-recruit:hover {
    background-color: var(--color-text);
    color: #fff;
    border-color: var(--color-text);
}

/* --- Contact CTA --- */
.contact-cta {
    background-color: #fff;
    text-align: center;
}

.contact-cta-inner {
    border: 1px solid #eee;
    padding: 80px 20px;
}

.contact-lead {
    margin-bottom: 40px;
    font-size: 1.1rem;
}

.btn-main-contact {
    display: inline-block;
    background-color: var(--color-text);
    color: #fff;
    padding: 20px 40px;
    font-size: 1.1rem;
    letter-spacing: 0.1em;
    transition: opacity 0.3s;
}

.btn-main-contact:hover {
    opacity: 0.8;
}

/* --- Responsive --- */
@media screen and (max-width: 768px) {
    /* 文字サイズのスマホ調整 */
    .mv-copy { 
        font-size: 2.8rem; /* ★修正: 2.4rem -> 2.8rem スマホでも大きく */
    }

    .mv-content {
        /* 強制的に画面幅いっぱいにして、余白を4%に統一 */
        width: 100%;
        left: 0;
        transform: translateY(-50%); /* 垂直中央だけ維持 */
        padding: 0 4%;
    }
    
    .concept-inner { flex-direction: column; }
    .concept-vertical-text { 
        writing-mode: horizontal-tb; 
        height: auto; 
        margin-bottom: 30px;
    }
    
    .service-row, 
    .service-row:nth-child(even) {
        flex-direction: column; /* 縦積みに強制変更 */
    }

    .service-text-wrap, 
    .service-image {
        width: 100%; /* 幅を100%に */
    }

    .service-image {
        height: 300px; /* スマホ時の画像の高さを固定 */
    }

    .service-text-wrap {
        padding: 50px 8%;
    }

    /* スマホ時は三角形を非表示にする（あるいは下向きにする事も可能ですが、無い方がスマートです） */
    .service-text-wrap::after {
        display: none; 
    }
    
    .jp-title {
        font-size: 1.5rem;
    }
    
    .recruit-title { font-size: 2.2rem; }
}