/* ==========================================================================
   GLAPentertainment Corporate Site - Top Page Stylesheet
   ========================================================================== */

/* --------------------------------------------------------------------------
   Frame Animation (Top Page)
   -------------------------------------------------------------------------- */
.frame-animation {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 9998;
    background: var(--color-gray) url('../images/top_animation/pc/frame_0001.webp') no-repeat center center;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    visibility: visible;
}

@media (max-width: 768px) {
    .frame-animation {
        background-image: url('../images/top_animation/sp/frame_0001.webp');
    }

    .frame-animation__canvas {
        top: 0;
        transform: translateX(-50%);
    }
}

/* Transitioning: keep fixed, lower z-index */
.frame-animation.is-transitioning {
    z-index: 0;
}

/* Completed: switch to absolute (top set by JS) */
.frame-animation.is-completed {
    position: absolute;
    z-index: 0;
}

.frame-animation__canvas {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* transition controlled by JS */
}

/* OPスキップ時: frame-animationのCSS背景画像(1枚目)を非表示にし、
   canvasに描画された最終フレームのみ表示する */
html.is-op-skip .frame-animation {
    background-image: none;
}

/* OPスキップ時: loadingの背景を不透明にしてframe-animationのチラつきを防止
   （loading z-index: 9999 > frame-animation z-index: 9998 で覆い隠す） */
html.is-op-skip .loading {
    background: var(--color-gray);
}

/* Prevent scroll during animation (OP再生時のみ) */
html:not(.is-op-skip) body.page-front {
    overflow: hidden;
}

html:not(.is-op-skip) body.page-front.is-animation-complete {
    overflow: auto;
}

/* Site content hidden during animation (OP再生時のみ) */
html:not(.is-op-skip) body.page-front .site-content {
    visibility: hidden;
    padding-bottom: 0;
}

html:not(.is-op-skip) body.page-front.is-animation-complete .site-content {
    visibility: visible;
}

/* Header hidden during animation (OP再生時のみ) */
html:not(.is-op-skip) body.page-front .header {
    opacity: 0;
    transform: translateY(-100%);
    transition: opacity 0.6s ease 0.3s, transform 0.6s ease 0.3s, background 0.3s ease;
}

html:not(.is-op-skip) body.page-front.is-animation-complete .header {
    opacity: 1;
    transform: translateY(0);
}

/* Side SNS hidden during animation (OP再生時のみ) */
html:not(.is-op-skip) body.page-front .side-bar {
    opacity: 0;
    transform: translateX(-100%);
    transition: opacity 0.6s ease 0.5s, transform 0.6s ease 0.5s, background 0.3s ease;
}

html:not(.is-op-skip) body.page-front.is-animation-complete .side-bar {
    opacity: 1;
    transform: translateX(0);
}

/* KV section positioned above animation when complete */
body.page-front.is-animation-complete .kv {
    position: relative;
    z-index: 1;
}

/* --------------------------------------------------------------------------
   KV Section
   -------------------------------------------------------------------------- */
.kv {
    position: relative;
    display: flex;
    align-items: center;
    padding: 0 var(--side-padding-right) 0 var(--side-padding-left);
    overflow: hidden;
    height: calc(100vh - var(--header-height));
    width: 100%;
}

.kv__bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}
.kv__content {
    position: relative;
    z-index: 1;
    max-width: 55%;
    padding-left: 6rem;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-flow: column;
}

.kv__title {
    display: block;
    padding-top: 10rem;
}

.kv__title-svg {
    width: auto;
    height: clamp(20rem, 35vw, 45rem);
    fill: var(--color-black);
}

.kv__company {
    position: absolute;
    bottom: 2%;
    left: calc(var(--side-padding-left) + -1rem);
    display: block;
}

.kv__company-svg {
    width: auto;
    height: clamp(2rem, 3vw, 4rem);
}

/* Scroll Indicator */
.kv__scroll {
    position: absolute;
    bottom: 7rem;
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--font-en);
    font-size: 1.1rem;
    letter-spacing: 0.1em;
    color: var(--color-black);
    writing-mode: vertical-rl;
    text-orientation: mixed;
}

.kv__scroll::before {
    content: '';
    position: absolute;
    top: calc(100% + 0.5rem);
    left: 50%;
    transform: translateX(-50%);
    width: 1px;
    height: 4rem;
    background: var(--color-black);
    animation: scrollLine 2s infinite;
}

@keyframes scrollLine {
    0% {
        transform: scale(1, 0);
        transform-origin: 0 0;
    }
    50% {
        transform: scale(1, 1);
        transform-origin: 0 0;
    }
    50.1% {
        transform: scale(1, 1);
        transform-origin: 0 100%;
    }
    100% {
        transform: scale(1, 0);
        transform-origin: 0 100%;
    }
}

/* Contact Button in KV */
.kv__contact {
    position: absolute;
    top: 9.3rem;
    right: 9.3rem;
    width: 9.5rem;
    height: 9.5rem;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
}

.kv__contact-inner {
    position: absolute;
    width: 20rem;
    height: 20rem;
    background: var(--color-orange);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-black);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    z-index: 2;
    filter: drop-shadow(.8rem .8rem .18rem rgba(0,0,0,.5));
}

.kv__contact-inner svg {
    width: 6.6rem;
    height: 4.6rem;
}

.kv__contact {
    opacity: 1 !important;
}

.kv__contact:hover .kv__contact-inner {
    transform: scale(1.1);
    box-shadow: 0 0.6rem 2.5rem rgba(242, 139, 0, 0.3);
}

.kv__contact-text_wrap {
    position: absolute;
    width: 20rem;
    height: 20rem;
    z-index: 5;
    transition: transform 0.3s ease;
}

.kv__contact:hover .kv__contact-text_wrap {
    transform: scale(1.1);
}

.kv__contact-text {
    width: 100%;
    height: 100%;
    animation: rotateText 10s linear infinite;
}

.kv__contact-text text {
    font-family: var(--font-en);
    font-size: 0.62rem;
    font-weight: 600;
    fill: var(--color-black);
    letter-spacing: 0.02em;
}

@keyframes rotateText {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@media screen and (max-width: 768px) {
    /* KV overall */
    .kv {
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        padding: 6rem 0 0 0;
        /* Height based on 9:16 ratio like canvas, capped at 100vh */
        height: min(177.8vw, calc(100vh - var(--header-height)));
    }

    .kv__content {
        max-width: 100%;
        padding-left: 0;
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        padding-top: 4rem;
        margin: 0 auto;
    }
.kv__title{
    padding-top: 0;
}
    /* Title: positioned to avoid vertical address bar */
    .kv__title {
        padding-left: 0;
    }

    .kv__title-svg {
        height: auto;
        width: calc(100vw - 10rem);
    }

    /* GLAP entertainment: near arch bottom */
    .kv__company {
        left: auto;
        bottom: var(--kv-canvas-gap, 0px);
    }

    .kv__company-svg {
        height: 2.5rem;
    }

    /* Contact button: same as PC, scaled down */
    .kv__contact {
        width: 12rem;
        height: 12rem;
        top: -1rem;
        right: 1rem;
        overflow: hidden;
    }

    .kv__contact-inner {
        width: 9.3rem;
        height: 9.3rem;
        filter: drop-shadow(.5rem .5rem .1rem rgba(0,0,0,.4));
    }

    .kv__contact-inner svg {
        width: 3.1rem;
        height: 2.1rem;
    }

    .kv__contact-text_wrap {
        width: 9.3rem;
        height: 9.3rem;
    }

    .kv__contact-text text {
        font-size: 0.62rem;
        font-weight: 600;
    }

    /* Scroll indicator: bottom-right in design */
    .kv__scroll {
        left: auto;
        right: 1rem;
        transform: none;
        bottom: 5rem;
    }

    .kv__scroll::before {
        height: 3rem;
    }

    .kv__url {
        display: none;
    }
    /* SP address: vertical text on left edge */
    .kv__address {
        position: absolute;
        left: 0.5rem;
        top: 50%;
        transform: translateY(-50%);
        writing-mode: vertical-rl;
        text-orientation: mixed;
        z-index: 10;
    }

    .kv__address span {
        font-family: var(--font-en);
        font-size: 0.9rem;
        letter-spacing: 0.05em;
        color: var(--color-black);
        white-space: nowrap;
    }
}

/* --------------------------------------------------------------------------
   What We Do Section
   -------------------------------------------------------------------------- */
.whatwedo {
    position: relative;
    padding: 15rem var(--side-padding-right) 12rem var(--side-padding-left);
    text-align: center;
    overflow: hidden;
    background-color: #f7f7f7;
}

/* Bubbles Background */
.whatwedo__bubbles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
}

.whatwedo__bubble {
    position: absolute;
    border-radius: 50%;
    background: var(--color-white);
}

.whatwedo__bubble--main {
    width: 30rem;
    height: 30rem;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.whatwedo__bubble--small {
    top: 50%;
    left: 50%;
    opacity: 0;
    animation: bubbleRise var(--duration, 8s) ease-in-out infinite;
    animation-delay: var(--delay, 0s);
    transition: border-radius 0.8s ease-in-out;
}

@keyframes bubbleRise {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) translateY(0) scale(0.3);
    }
    10% {
        opacity: 0.85;
        transform: translate(-50%, -50%) translateY(-5rem) scale(1);
    }
    85% {
        opacity: 0.85;
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) translateY(-100vh) scale(1);
    }
}

.whatwedo__label {
    position: absolute;
    left: calc(50% - 40rem);
    transform: translateX(-50%);
    top: 5rem;
    z-index: 1;
    font-family: var(--font-en);
    font-size: 1.2rem;
    font-weight: 500;
    letter-spacing: 0.2em;
    color: var(--color-gray-dark);
    margin-bottom: 4rem;
}

.whatwedo__title {
    font-family: var(--font-ja);
    font-size: clamp(2.4rem, 4vw, 3.6rem);
    font-weight: 900;
    margin-bottom: 4rem;
    position: relative;
    z-index: 1;
    display: inline-block;
    overflow: hidden;
    letter-spacing: 0.2em;
}

/* PC/SP toggle */
.whatwedo__title--sp { display: none; }

@media screen and (max-width: 768px) {
    .whatwedo__title--pc { display: none; }
    .whatwedo__title--sp { display: block; }
}

.whatwedo__title-text {
    position: relative;
    z-index: 1;
}

/* Background span (PC: single line) */
.whatwedo__title-bg {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    width: var(--bg-width);
    height: 100%;
    z-index: 0;
}

.whatwedo__title-bg--yellow {
    --bg-width: 100%;
    background: #e9bd00;
}

.whatwedo__title-bg--orange {
    --bg-width: 60%;
    background: #ee8a00;
    animation-delay: 0.15s;
}

.whatwedo__title.is-animated .whatwedo__title-bg {
    animation: whatwedoTitleAnimation 1s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    animation-delay: .5s;
}

/* SP: line-separated structure */
.whatwedo__title-line {
    display: block;
    position: relative;
    overflow: hidden;
}

.whatwedo__title-line .whatwedo__title-bg {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    width: var(--bg-width);
    height: 90%;
    z-index: 0;
}

.whatwedo__title-line .whatwedo__title-text {
    position: relative;
    z-index: 1;
}

/* SP: slight delay for 2nd line animation */
.whatwedo__title.is-animated .whatwedo__title-line:nth-child(2) .whatwedo__title-bg {
    animation-delay: 0.7s;
}

@keyframes whatwedoTitleAnimation {
    0% { width: var(--bg-width); }
    100% { width: 0; }
}

.whatwedo__text {
    position: relative;
    z-index: 1;
    font-size: 1.5rem;
    line-height: 2;
    max-width: 60rem;
    margin: 0 auto 5rem;
}

.whatwedo__text p {
    margin-bottom: 0;
    text-align: left;
    font-weight: 600;
    line-height: 2;
}
.whatwedo__text p:first-child{
    text-indent: -0.5rem;
}
.whatwedo .btn {
    position: absolute;
    z-index: 1;
    left: calc(50% - -40rem);
    transform: translateX(-50%);
    bottom: 5rem;
    background: var(--color-orange);
}

@media screen and (max-width: 768px) {
    .whatwedo {
        padding: 4rem 2rem 4rem;
        text-align: left;
    }

    /* Label: top-left in design */
    .whatwedo__label {
        position: static;
        transform: none;
        text-align: left;
        margin-bottom: 4rem;
    }

    .whatwedo__bubble--main {
        width: 18rem;
        height: 18rem;
    }

    /* Title: left-aligned, larger, with line breaks */
    .whatwedo__title {
        font-size: 2.8rem;
        margin-bottom: 7rem;
        display: block;
        overflow: visible;
        text-align: center;
        padding-top: 3rem;
    }
    .whatwedo__title--pc { display: none; }
    .whatwedo__title--sp { display: block; }

    /* Description: left-aligned */
    .whatwedo__text {
        font-size: 1.4rem;
        text-align: left;
        margin-bottom: 4rem;
        max-width: 76%;
    }

    .whatwedo__text p {
        text-align: left;
        display: inline;
    }

    /* Button: centered */
    .whatwedo .btn {
        position: relative;
        bottom: auto;
        left: auto;
        transform: none;
        margin: 0 auto;
        display: flex;
        background: var(--color-orange);
        color: var(--color-black);
    }
    .whatwedo__bubbles{top: -12rem;}
}

/* --------------------------------------------------------------------------
   Marquee Section
   -------------------------------------------------------------------------- */
.marquee {
    padding: 4rem 0;
    overflow: hidden;
}

.marquee__track {
    display: flex;
    width: max-content;
    animation: marquee 100s linear infinite;
}

.marquee__track--reverse {
    animation-direction: reverse;
}

.marquee__content {
    display: flex;
    align-items: center;
    gap: 4rem;
    padding-right: 4rem;
}

.marquee__item {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    font-family: var(--font-en);
    font-size: 2rem;
    font-weight: 500;
    white-space: nowrap;
    color: var(--color-black);
}

.marquee__item--large {
    font-size: 4rem;
    font-style: italic;
    color: var(--color-gray-dark);
    opacity: 0.3;
}

.marquee__icon {
    width: 4rem;
    height: 4rem;
    object-fit: cover;
}

/* Marquee Text - SVG textPath (serpentine) Style */
.marquee--text {
    padding: 0;
    overflow: hidden;
    position: relative;
    z-index: 2;
    margin-top: -10rem;
    margin-bottom: -10rem;
}

.marquee--text .marquee__track {
    display: none;
}

.marquee--text__svg {
    display: block;
    width: 100%;
    height: auto;
}

.marquee--text__svg text {
    font-family: var(--font-en), sans-serif;
}

@keyframes marquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

@media screen and (max-width: 768px) {
    .marquee__item {
        font-size: 1.6rem;
    }

    .marquee__item--large {
        font-size: 2.4rem;
    }
    .marquee--text{
        margin-top: -10rem;
        margin-bottom: -5rem;
    }
   .marquee--text__svg {
        width: 150%;
    position: relative;
    left: -4rem;
    }
}

/* --------------------------------------------------------------------------
   Service Section
   -------------------------------------------------------------------------- */
.service {
    background: var(--color-primary);
    padding: 10rem var(--side-padding-right) 10rem var(--side-padding-left);
}

.service__inner {
    max-width: 120rem;
    margin: 0 auto;
}

.service__title {
    font-family: var(--font-en);
    font-size: clamp(3rem, 6vw, 7rem);
    font-weight: 700;
    margin-bottom: 6rem;
    position: relative;
}

.service__title svg{
    width: 50rem;
    position: absolute;
    top: 50%;
    left: -4rem;
    transform: translateY(-50%);
    z-index: -1;
}

.service__title span {
    color: var(--color-white);
}

.service__content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
}
.service__left{
    padding-left: 10rem;
}
.service__heading {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 2rem;
}

.service__desc {
    font-size: 1.4rem;
    line-height: 2;
    margin-bottom: 7rem;
    font-weight: 600;
}

.service__diagram {
    position: relative;
    width: 100%;
    height: 46.204rem;
}

.service__diagram-item {
    display: flex;
    flex-direction: column;
    font-family: var(--font-en);
    font-size: 1.6rem;
    font-weight: 500;
    position: absolute;
}

.service__diagram-item span:first-child {
    font-size: 1.8rem;
    font-weight: 700;
}

.service__diagram-item span:last-child {
    font-size: 1.4rem;
    font-weight: 400;
}

.service__diagram-item--brand {
    top: 0;
    right: 0;
    text-align: right;
}

.service__diagram-item--sns {
    bottom: 0;
    left: 0;
}

.service__diagram-item--comm {
    top: 50%;
    right: 0;
    transform: translateY(-50%);
}

.service__diagram-lines {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.service__diagram-lines path {
    fill: none;
    stroke: var(--color-black);
    stroke-width: 2;
}

/* Diagram SVG */
.service__diagram-svg {
    width: 100%;
    height: 100%;
}

/* Diagram Animation - Initial state */
.service__text {
    opacity: 0;
    transform: scale(0.8);
    transform-origin: center;
    transition: opacity var(--text-duration) ease, transform var(--text-duration) ease;
}

/* ========================================
   Service Diagram Animation Timing
   ========================================

   Timeline:
   0.0s  Brand Creative appear (0.5s)
   0.3s  Group1 line start (0.8s draw) -> 1.1s done
   0.7s  Group1 arrow start (0.25s draw) -> 0.95s done
   1.3s  SNS Planning / Communication appear (0.5s)
   2.0s  Group2 line start (0.8s draw) -> 2.8s done
   2.4s  Group2 arrow start (0.25s draw) -> 2.65s done
*/
.service__diagram {
    /* Animation duration */
    --text-duration: 0.5s;       /* text appear */
    --line-duration: 0.8s;       /* line draw */
    --arrow-duration: 0.25s;     /* arrow draw */
    --arrow-fill-duration: 0.15s; /* arrow fill */
    --arrow-fill-delay: 0.15s;   /* arrow fill delay (after draw) */

    /* Start timing (delay) */
    --brand-delay: 0s;           /* Brand Creative */
    --group1-line-delay: 0.3s;   /* Group1 line */
    --group1-arrow-delay: 0.7s;  /* Group1 arrow */
    --sns-delay: 1.3s;           /* SNS Planning */
    --comm-delay: 1.3s;          /* Communication */
    --group2-line-delay: 2.0s;   /* Group2 line */
    --group2-arrow-delay: 2.4s;  /* Group2 arrow */
}

.service__connector .service__line {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    transition: stroke-dashoffset var(--line-duration) ease;
}

.service__connector .service__arrow {
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
    fill-opacity: 0;
    transition: stroke-dashoffset var(--arrow-duration) ease,
                fill-opacity var(--arrow-fill-duration) ease var(--arrow-fill-delay);
}

/* Animated state */
/* Step 1: Brand Creative appears */
.service__diagram.is-animated .service__text--brand {
    opacity: 1;
    transform: scale(1);
    transition-delay: var(--brand-delay);
}

/* Group 1: Lines with arrows */
.service__diagram.is-animated .service__connector--group1 .service__line {
    stroke-dashoffset: 0;
    transition-delay: var(--group1-line-delay);
}

.service__diagram.is-animated .service__connector--group1 .service__arrow {
    stroke-dashoffset: 0;
    fill-opacity: 1;
    transition-delay: var(--group1-arrow-delay);
}

/* Step 2: SNS Planning and Communication appear */
.service__diagram.is-animated .service__text--sns {
    opacity: 1;
    transform: scale(1);
    transition-delay: var(--sns-delay);
}

.service__diagram.is-animated .service__text--comm {
    opacity: 1;
    transform: scale(1);
    transition-delay: var(--comm-delay);
}

/* Group 2: Lines with arrows */
.service__diagram.is-animated .service__connector--group2 .service__line {
    stroke-dashoffset: 0;
    transition-delay: var(--group2-line-delay);
}

.service__diagram.is-animated .service__connector--group2 .service__arrow {
    stroke-dashoffset: 0;
    fill-opacity: 1;
    transition-delay: var(--group2-arrow-delay);
}

@media screen and (max-width: 768px) {
    .service {
        padding: 4rem 0 8rem;
        overflow: hidden;
    }

    .service__inner {
        padding-left: 2rem;
        padding-right: 2rem;
        position: relative;
    }

    .service__title {
        font-size: 7rem;
        margin-bottom: 2rem;
        position: static;
    }

    .service__title svg {
        width: 28rem;
        left: 10%;
        right: auto;
        transform: rotateZ(90deg);
        position: absolute;
        left: -11rem;
        top: auto;
        bottom: 11rem;
    }

    .service__content {
        display: flex;
        flex-direction: column;
        align-items: stretch;
    }

    .service__left {
        padding-left: 0;
        display: contents;
    }

    .service__heading {
        font-size: 2.6rem;
        text-align: left;
    }

    .service__desc {
        font-size: 1.3rem;
        margin-bottom: 5rem;
        text-align: left;
    }

    .service__desc br {
        display: none;
    }

    .service__left .btn {
        order: 10;
        margin-top: 2rem;
        align-self: center;
    }

    .service__right {
        order: 5;
        max-width: 95%;
        margin: 0 auto;
    }

    .service__diagram {
        height: auto;
        margin-bottom: 2rem;
    }

    .service__diagram-svg {
        width: 100%;
        height: auto;
    }
}

/* --------------------------------------------------------------------------
   Works Section
   -------------------------------------------------------------------------- */
.works {
    background: #4d4d4d;
    padding: 10rem var(--side-padding-right) 10rem var(--side-padding-left);
}

.works__inner {
    max-width: 120rem;
    margin: 0 auto;
}

.works__title {
    font-family: var(--font-en);
    font-size: clamp(3rem, 6vw, 7rem);
    font-weight: 700;
    margin-bottom: 6rem;
    color: var(--color-white);
}

.works__title span {
    color: var(--color-primary);
}

.works__slider {
    margin-bottom: 4rem;
    overflow: visible;
}

.works__card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.works__card:hover {
    transform: translateY(-0.5rem);
}

.works__card-link {
    display: block;
}

.works__card-img {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    margin-bottom: 1.5rem;
}

.works__card-img::after {
    content: '';
    position: absolute;
    inset: 0;
    border: .5rem solid transparent;
    transition: border-color 0.3s ease;
    pointer-events: none;
    z-index: 1;
}

.works__card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

.works__card-link:hover .works__card-img::after {
    border-color: var(--color-primary);
}

.works__card-link:hover .works__card-img img {
    transform: scale(1.05);
}

.works__card-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #f0f0f0 0%, #e0e0e0 100%);
}

.works__card-content {
    padding: 0;
}

.works__card-title {
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-white);
    margin-bottom: 1.2rem;
}

.works__card-cat {
    display: inline-block;
    padding: 0.3rem 2rem 0.1rem;
    background: none;
    color: var(--color-primary);
    border: .1rem solid var(--color-primary);
    font-size: 1.2rem;
    text-align: center;
    margin-bottom: 1.2rem;
}

/* SP: tag above image */
.works__card-cat--sp,.works__card-cat-wrap--sp { display: none; }

@media screen and (max-width: 768px) {
    .works__card-cat--pc { display: none; }
    .works__card-cat-wrap--sp{
        display: block;
    }
    .works__card-cat--sp {
        display: inline-block;
        color: var(--color-primary);
        border: .1rem solid var(--color-primary);
        font-size: 1.1rem;
        padding: 0.3rem 2rem;
        width: auto;
    }
}

.works__card-desc {
    font-size: 1.4rem;
    color: var(--color-white);
    line-height: 2;
}

.works__nav__wrap,.blog__nav__wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.works__nav {
    display: flex;
    gap: 1rem;
}

.works__nav-btn {
    width: 4.4rem;
    height: 4.4rem;
    background: var(--color-primary);
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-black);
    transition: all 0.3s ease;
}

.works__nav-btn:hover {
    opacity: 0.7;
}

.works__nav-btn.swiper-button-disabled {
    opacity: 0.3;
    cursor: default;
}

@media screen and (max-width: 768px) {
    .works {
        padding: 4rem 0 15rem;
    }

    .works__inner {
        padding-left: 2rem;
        padding-right: 2rem;
    }

    .works__slider {
        margin-left: -2rem;
        margin-right: -2rem;
        margin-bottom: 0rem;
    }

    .works__title {
        margin-bottom: 2rem;
        font-size: 7rem;
    }

    .works__card-img {
        aspect-ratio: 1/1;
    }

    .works__card-content {
        padding: 2rem 0;
    }

    .works__card-title {
        font-size: 1.8rem;
    }

    .works__card-desc {
        font-size: 1.3rem;
    }

    .works__nav__wrap {
        flex-direction: column;
        align-items: center;
        gap: 5rem;
    }

    .works__nav {
        order: 1;
    }

    .works__nav__wrap .btn {
        order: 2;
    }
}

/* --------------------------------------------------------------------------
   Blog Section
   -------------------------------------------------------------------------- */
.blog {
    background: var(--color-gray);
    padding: var(--header-height) var(    --side-padding-right) 0 var(--side-padding-left);
}

.blog__inner {
    max-width: 120rem;
    margin: 0 auto;
}

.blog__label {
    font-family: var(--font-en);
    font-size: 1.2rem;
    font-weight: 500;
    letter-spacing: 0.2em;
    color: var(--color-black);
    margin-top: 2rem;
}

.blog__title {
    font-family: var(--font-en);
    font-size: clamp(3rem, 6vw, 7rem);
    font-weight: 700;
    margin-bottom: 6rem;
    line-height: 1;
}

.blog__slider {
    margin-bottom: 4rem;
    overflow: visible;
}

.blog__card {
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.blog__card:hover {
    transform: translateY(-0.5rem);
}

.blog__card-link {
    display: block;
}

.blog__card-img {
    aspect-ratio: 16/9;
    overflow: hidden;
}

.blog__card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.blog__card-placeholder {
    width: 100%;
    height: 100%;
    background: var(--color-gray);
    display: flex;
    align-items: center;
    justify-content: center;
}

.blog__card-placeholder--icon {
    flex-direction: column;
}

.blog__card-placeholder--icon span {
    font-family: var(--font-en);
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-gray-dark);
}

.blog__card-content {
    padding: 2rem 0;
}

.blog__card-cat {
    display: inline-block;
    padding: 0.4rem 1.2rem;
    background: var(--color-primary);
    font-size: 1.1rem;
    border-radius: 0.3rem;
    margin-bottom: 1rem;
}

.blog__card-title {
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1.6;
    margin-bottom: 1rem;
}

.blog__card-desc {
    font-size: 1.2rem;
    color: var(--color-gray-dark);
    line-height: 1.6;
}

.blog__card-date {
    display: block;
    font-family: var(--font-en);
    font-size: 1.2rem;
    color: var(--color-gray-dark);
    margin-top: 1rem;
}

.blog__nav {
    display: flex;
    gap: 1rem;
}

.blog__nav-btn {
    width: 4.4rem;
    height: 4.4rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-primary);
    color: var(--color-black);
    transition: all 0.3s ease;
}

.blog__nav-btn:hover {
    opacity: .7;
}

.blog__nav-btn.swiper-button-disabled {
    opacity: 0.3;
    cursor: default;
}

@media screen and (max-width: 768px) {
    .blog__inner {
        padding-left: 2rem;
        padding-right: 2rem;
    }

    .blog__slider {
        margin-left: -2rem;
        margin-right: -2rem;
    }

    .blog__label {
        margin-bottom: 0.5rem;
    }

    .blog__title {
        margin-bottom: 3rem;
        font-size: 7rem;
    }

    .blog__card-img {
        aspect-ratio: 16/9;
    }

    .blog__card-title {
        font-size: 1.4rem;
    }

    .blog__nav__wrap {
        flex-direction: column;
        align-items: center;
        gap: 5rem;
    }

    .blog__nav {
        order: 1;
    }

    .blog__nav__wrap .btn {
        order: 2;
    }
}

/* --------------------------------------------------------------------------
   News Section
   -------------------------------------------------------------------------- */
.news {
    background: var(--color-gray);
    padding: 8rem var(--side-padding-right) 12rem var(--side-padding-left);
}

.news__inner {
    max-width: 120rem;
    margin: 0 auto;
}

.news__title {
    font-family: var(--font-en);
    font-size: clamp(3rem, 6vw, 7rem);
    font-weight: 700;
    margin-bottom: 4rem;
}

.news__list {
    margin-bottom: 4rem;
}

.news__item {
    border-bottom: 2px solid var(--color-black);
}

.news__item:first-child {
    border-top: 2px solid var(--color-black);
}

.news__item-link {
    position: relative;
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    align-items: center;
    padding: 3rem 2rem;
}

.news__item-link::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--color-primary);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    z-index: 0;
}

.news__item-link:hover::before {
    transform: scaleX(1);
    transform-origin: left;
}

.news__item-link:hover {
    opacity: 1;
}

.news__item-link > * {
    position: relative;
    z-index: 1;
}

.news__item-date {
    grid-column: 1;
    grid-row: 1;
    font-family: var(--font-en);
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--color-black);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.news__item-day {
    color: var(--color-black);
}

.news__item-title {
    grid-column: 1;
    grid-row: 2;
    font-size: 1.5rem;
    padding-left: 2rem;
}

.news__item-arrow {
    grid-column: 2;
    grid-row: 1 / 3;
    align-self: center;
    color: var(--color-gray-dark);
    transition: color 0.3s ease;
}

.news .btn {
    margin-left: auto;
    display: flex;
}

@media screen and (max-width: 768px) {
    .news {
        padding: 6rem 2rem 8rem;
    }
.news__title{
    font-size:7rem;
}
    .news__item:first-child {
        border-top: none;
    }

    .news__item-link {
        padding: 2.5rem 1rem;
    }

    .news__item-date {
        font-size: 1.3rem;
        margin-bottom: 1rem;
    }

    .news__item-title {
        font-size: 1.4rem;
        padding-left: 0;
        padding-right: 2rem;
    }

    .news__item-arrow {
        align-self: end;
    }

    .news .btn {
        margin: 0 auto;
    }
    .news__list{
        margin-bottom: 5rem;
    }
}

/* --------------------------------------------------------------------------
   KV Typing Animation & Cursor
   -------------------------------------------------------------------------- */

/* Staggered animation for cards */
.works__card.animate-on-scroll,
.blog__card.animate-on-scroll {
    transition-delay: calc(var(--card-index, 0) * 0.1s);
}

/* Typing animation: hide all paths initially */
.kv__title-svg path,
.kv__company-svg path {
    opacity: 0;
}

.kv__title-svg path.is-typed,
.kv__company-svg path.is-typed {
    opacity: 1;
}

/* Typing cursor */
.kv__cursor {
    position: absolute;
    width: 2px;
    background: var(--color-black);
    animation: cursorBlink 0.6s step-end infinite;
    transition: left 0.05s ease, top 0.05s ease, height 0.05s ease;
    z-index: 5;
}

.kv__cursor.is-hidden {
    display: none;
}

@keyframes cursorBlink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

/* Show immediately on SKIP */
body.is-loaded.is-skip .kv__title-svg path,
body.is-loaded.is-skip .kv__company-svg path {
    opacity: 1;
}