@charset "utf-8";

/* ===== Utility Classes (Top Page) ===== */
@media screen and (min-width: 769px) {

    .fs-18,
    .fs-18 dt,
    .fs-18 dd {
        font-size: 18px;
    }
}

/* ===== Top Hero ===== */
.top-hero {
    height: 100vh;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
}

.top-hero-bg {
    position: absolute;
    top: 0;
    left: 45%;
    transform: translateX(-50%);
    width: 115%;
    height: auto;
    display: block;
    z-index: 0;
    pointer-events: none;
}

.top-hero-quote {
    position: relative;
    width: 100%;
    max-width: 1200px;
    z-index: 1;
    box-sizing: border-box;
}

.top-hero-quote p {
    font-size: clamp(30px, 3.5vw, 45px);
    color: #ffffff;
    letter-spacing: 0.06em;
    text-align: center;
    line-height: 1.6;
}

/* ===== Message Section ===== */
.top-message {
    margin-top: 230px;
}

.top-message .container {
    width: 100%;
}

.top-message p {
    text-align: center;
}

.top-message .deco-hero {
    top: -10%;
    width: 60%;
    right: -25%;
}

.deco-hero-sp {
    width: 100vw;
    right: -65vw;
    top: 50%;
}

/* ===== CEO Section ===== */
.top-ceo {
    margin-top: 20vh;
    padding-bottom: 3vw;
}

.top-ceo-inner {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: clamp(32px, 6vw, 96px);
}

.top-ceo-photo {
    flex: 0 0 38%;
}

.top-ceo-photo img {
    width: 100%;
    height: auto;
    display: block;
}

.top-ceo-text {
    flex: 0 1 auto;
    min-width: 0;
}

.top-ceo-text .top-bio {
    margin-bottom: 32px;
}

.common-viewmore {
    display: inline-block;
    font-size: clamp(12px, 2.4vw, 19px);
    letter-spacing: 0.05em;
    border-bottom: 1px solid #000000;
    padding-bottom: 2px;
    line-height: 1;
    font-family: "Libre Baskerville", serif;
}

.common-viewmore:hover {
    opacity: 0.6;
}

.deco-ceo-sp {
    width: 100vw;
    left: -50vw;
    top: 43%;
    z-index: 1;
}

/* ===== Action Section ===== */
.top-action {
    padding-bottom: 4vw;
    overflow: visible;
}

.deco-action {
    top: -30%;
    left: -20%;
    width: 50%;
    z-index: 0;
}

.deco-action-sp {
    width: 70vw;
    right: -30vw;
    top: 55%;
}

.top-action-lead {
    font-size: 18px;
    margin-bottom: 80px;
    line-height: 1.8;
}

.top-action-body {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.top-action-card {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 30px;
    background-color: rgba(255, 255, 255, 0.4);
    padding: 60px 60px 60px 40px;
    border: 2px solid #ffffff;
}

.top-action-card-visual {
    flex: 0 0 40%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.top-action-card-en {
    font-size: 13px;
    letter-spacing: 0.08em;
    line-height: 1.6;
    margin-bottom: clamp(6px, 1vw, 12px);
    font-family: "Libre Baskerville", serif;
}

.top-action-card-title {
    font-size: 30px;
    line-height: 1.5;
}

.top-action-desc {
    flex: 1;
    display: flex;
    align-items: flex-start;
}

.top-action-desc p {
    font-size: 15px;
    line-height: 2.2;
}

/* ===== Partnership Section ===== */
.top-partnership {
    padding-bottom: 4vw;
    position: relative;
    overflow: visible;
}

.deco-right-partnership {
    top: -80%;
    right: -12%;
    width: 40%;
    z-index: 0;
}

.top-partnership .fadein {
    position: relative;
    z-index: 1;
}

.top-partnership-inner {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 60px;
    width: 100%;
    margin-top: 40px;
}

.top-partnership-photo {
    flex: 0 0 35%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    aspect-ratio: 5/4;
}

.top-partnership-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    background-color: #d9d9d9;
}

.top-partnership-text {
    flex: 1;
}

.top-partnership-desc {
    line-height: 2.2;
    margin-bottom: 24px;
}

/* ===== Team Member Section ===== */
.top-team {
    padding-bottom: 8vw;
    position: relative;
    overflow: visible;
}

.deco-team01 {
    top: 30%;
    left: -21vw;
    width: 40%;
}

.deco-team02 {
    top: 50%;
    right: -10vw;
    width: 25%;
}

.deco-team-sp {
    top: 95%;
    left: -35vw;
    width: 70%;
}

.top-team .fadein {
    position: relative;
    z-index: 1;
}

.team-img-wrap {
    width: 100%;
    margin-block: 70px;
}

.team-img-wrap img {
    width: 50%;
    height: auto;
    display: block;
    margin-inline: auto;
}

.executives-info {
    display: flex;
    justify-content: space-between;
    gap: 10%;
}

.executive-profile {
    flex: 1;
}

.executive-title {
    font-size: 16px;
    margin-bottom: 8px;
}

.top-team .executive-name {
    margin-bottom: 33px;
    font-size: clamp(25px, 2.5vw, 35px);
    line-height: 1;
}

.executive-en {
    font-family: "Libre Baskerville", serif;
    font-size: clamp(14px, 1.4vw, 18px);
    margin-left: 1rem;
}

.executive-desc {
    margin-bottom: 27px;
}

.executive-desc p {
    font-size: clamp(13px, 1.3vw, 15px);
}

.executive-edu p {
    font-size: clamp(12px, 1.2vw, 14px);
}

/* ===== Aesthetics Section ===== */
.top-aesthetics {
    padding-bottom: 8vw;
    position: relative;
    overflow: hidden;
}

.deco-aesthetics-sp {
    top: 10%;
    right: -20vw;
    width: 70%;
}

.aesthetics-circles {
    position: relative;
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    aspect-ratio: 1 / 0.96;
}

.aesthetics-circle {
    position: absolute;
    width: 52%;
    aspect-ratio: 1;
    border: 2px solid #fff;
    background-color: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
}

.circle-1 {
    top: 0;
    left: 24%;
    z-index: 3;
}

.circle-2 {
    top: 44%;
    left: 0;
    z-index: 2;
}

.circle-3 {
    top: 44%;
    right: 0;
    z-index: 1;
}

.circle-inner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 70%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.circle-1 .circle-inner,
.circle-2 .circle-inner,
.circle-3 .circle-inner {
    padding: 0 5%;
}

.circle-header {
    position: relative;
    width: 100%;
    min-height: clamp(90px, 9vw, 130px);
    margin-bottom: 1rem;
}

.circle-num {
    position: absolute;
    top: 5px;
    left: 67px;
    font-size: 64px;
    color: #54C0E5;
    font-family: "Libre Baskerville", serif;
    line-height: 1;
    font-weight: 300;
}

.circle-slash {
    position: absolute;
    top: 0;
    left: 162px;
    width: 0.5px;
    height: clamp(80px, 12vw, 135px);
    background-color: #000;
    transform: rotate(40deg);
    transform-origin: top left;
}

.circle-title {
    position: absolute;
    top: 20%;
    left: 168px;
    font-size: clamp(14px, 1.6vw, 23px);
    line-height: 1.6;
    font-weight: normal;
    text-align: left;
    white-space: nowrap;
}

.circle-3 .circle-title {
    top: 5%;
}

.circle-desc {
    font-size: clamp(12px, 1.2vw, 18px);
    line-height: 2.2;
}

/* ===== Company Profile Section ===== */
.top-profile {
    padding-bottom: 23vw;
    position: relative;
    overflow: visible;
}

.deco-left-profile {
    top: -15%;
    left: -15vw;
    width: 500px;
    z-index: 0;
}

.top-profile .fadein {
    position: relative;
    z-index: 1;
}

.top-profile-inner {
    display: flex;
    flex-direction: column;
    gap: 60px;
}

.top-profile-info {
    display: flex;
    font-family: "MFW-KoburinaGoStd-W3";
    gap: clamp(24px, 4.5vw, 96px);
    justify-content: flex-end;
}

.profile-list {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.profile-item {
    display: flex;
    align-items: flex-start;
    gap: 32px;
}

.profile-item dt,
.profile-item dd {
    font-size: clamp(13px, 1.4vw, 16px);
    line-height: 1.8;
}

.profile-item dt {
    width: 120px;
    flex-shrink: 0;
    letter-spacing: 0.1em;
    text-align: right;
}

.profile-item dd {
    letter-spacing: 0.05em;
}

.profile-separator {
    margin: 0 0.5rem;
}


/* ===== Responsive — Tablet & PC ===== */
@media screen and (min-width: 769px) and (max-width: 1023px) {
    .top-message {
        margin-top: 3vh;
    }

    .circle-header {
        margin-bottom: 1rem;
    }

    .circle-num {
        font-size: 52px;
        left: 30px;
    }

    .circle-slash {
        left: 105px;
    }

    .circle-title {
        left: 112px;
    }
}

@media screen and (max-width: 960px) {
    .top-ceo-inner {
        flex-direction: column-reverse;
    }

    .top-partnership-inner {
        flex-direction: column;
        gap: 28px;
        padding: 0;
        margin-top: 0;
    }

    .team-img-wrap img {
        width: 100%;
    }
}

/* ===== Responsive — SP ===== */
@media screen and (max-width: 768px) {

    .top-ceo,
    .top-action,
    .top-partnership,
    .top-team,
    .top-aesthetics,
    .top-profile {
        margin-block: 150px;
        padding-block: 0;
    }

    /* Hero */
    .top-hero-bg {
        width: 175vw;
        top: 55%;
        left: 43%;
        transform: translate(-45%, -50%);
    }

    .top-hero-quote {
        padding: 0 6%;
    }

    .top-hero-quote p {
        font-size: 27px;
        line-height: 2;
    }

    /* Message */
    .top-message {
        margin-top: 3vh;
    }

    .top-message p.fs-18 {
        font-size: 15px;
    }

    /* CEO */
    .top-ceo-inner {
        width: 100%;
    }

    .top-ceo-text .top-bio {
        font-size: 14px;
        margin-bottom: 24px;
    }

    .common-viewmore {
        font-size: clamp(14px, 4.5vw, 16px);
    }

    /* Action */
    .top-action-card-title {
        font-size: 20px;
    }

    .top-action-lead {
        font-size: 14px;
        margin-bottom: 28px;
    }

    .top-action-card {
        flex-direction: column;
        padding: 20px 15px;
    }

    .top-action-card-visual {
        flex: 0 0 auto;
        width: 100%;
    }

    .top-action-desc p {
        font-size: 13px;
        width: 85%;
        margin-left: auto;
    }

    /* Partnership */
    .top-partnership-wrap {
        width: 100%;
    }

    .top-partnership-photo {
        width: 100%;
    }

    .top-partnership-desc {
        font-size: 14px;
    }

    /* Team */
    .top-team-inner {
        width: 100%;
    }

    .team-img-wrap {
        margin-top: 0;
        margin-bottom: 50px;
    }

    .executives-info {
        flex-direction: column;
        gap: 50px;
    }

    .top-team .executive-title,
    .top-team .executive-en {
        font-size: 14px;
    }

    .executive-name {
        flex-wrap: wrap;
        gap: 12px;
    }

    /* Aesthetics */
    .top-aesthetics-inner {
        width: 100%;
    }

    .aesthetics-circles {
        aspect-ratio: auto;
        padding-bottom: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .aesthetics-circle {
        position: relative;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        transform: none !important;
        width: 90%;
        max-width: 320px;
    }

    .aesthetics-circle+.aesthetics-circle {
        margin-top: -25px;
    }

    .aesthetics-circle .circle-inner {
        width: 70%;
    }

    .circle-header {
        margin-bottom: 0;
    }

    .circle-num {
        left: 15px;
        font-size: 40px;
    }

    .circle-slash {
        top: 0;
        left: 75px;
        transform: rotate(40deg);
        transform-origin: top left;
    }

    .circle-title {
        left: 73px;
    }

    /* Profile */
    .deco-left-profile {
        top: -5%;
        left: -15vw;
        width: clamp(200px, 50vw, 300px);
    }

    .top-profile-inner {
        width: 100%;
        gap: 40px;
    }

    .top-profile-info {
        width: 100%;
        justify-content: center;
    }

    .profile-list {
        gap: 10px;
    }

    .profile-item {
        gap: 1.2rem;
    }

    .profile-item dt,
    .profile-item dd {
        letter-spacing: -0.02em;
        line-height: 1.8;
    }

    .profile-item dt {
        width: 70px;
    }

    .profile-separator {
        margin: 0 0 0 0.3rem;
    }
}