@charset "UTF-8";
/* ==========================================================================
   custom.css — Serendie Street Boston
   Figma: セレンディ2階層目以降 / Serendie Street Boston Landing Page April 30
   既存CSS（site.min, clientlib-*）をオーバーライドして
   Figmaのデザインに合わせて再構築する
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. CSS Custom Properties（:root ではなく .gs21-Main 内に定義）
   -------------------------------------------------------------------------- */
#serendieSB .gs21-Main {
    --color-cyan: #3EC8CF;
    --color-cyan-light: #EDFEFF;
    --color-pink: #FF8080;
    --color-cobalt: #0054A0;
    --color-black: #000000;
    --color-white: #FFFFFF;
    --color-gray: #999999;
    --color-gray-light: #E1E1E1;
    --color-border: #E0DFE3;

    --content-width: 1380px;
    --content-padding-x: 40px;

    --font-serendie: "Serendie Office", "Roboto", "Noto Sans JP", sans-serif;
    --font-roboto: "Roboto", "Noto Sans JP", sans-serif;
    --font-noto: "Noto Sans JP", "Roboto", sans-serif;
}

/* --------------------------------------------------------------------------
   2. メインコンテナリセット（既存 grid / padding 解除）
   -------------------------------------------------------------------------- */
#serendieSB .button .cmp-button:hover{
    background:#fff;
}
#serendieSB .gs21-Main {
    position: relative;
    width: 100%;
    overflow-x: clip;
    margin-bottom: 0;
    padding-bottom: 0;
    background: var(--color-cyan);
}

#serendieSB .gs21-Main .gs21-MainContents {
    width: 100%;
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
}
.container2 .cmp-container2--1col>.cmp-container2-child>.aem-Grid{
    max-width: 1380px;
    margin: 0 auto;
}
/* image 標準リセット */
#serendieSB .gs21-Main .cmp-image,
#serendieSB .gs21-Main .cmp-image__image {
    display: block;
    margin: 0;
}
#serendieSB .card.aem-GridColumn .mel25-cardColumn--set03>.container>.cmp-container {
    gap: 32px;
}
.experiencefragment.aem-GridColumn.aem-GridColumn--default--12 {
    position: relative;
    z-index: 2;
}
@media only screen and (max-width: 767.99px) {
    #serendieSB .gs21-MainContents,
    #serendieSB .gs21-MainContents--Narrow {
        padding-left: 0;
        padding-right: 0;
    }
}
/* --------------------------------------------------------------------------
   3. mv（メインビジュアル）セクション
   -------------------------------------------------------------------------- */
.container2:has(#mv) {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 90vh;
}

/* mv site-logo（cmp-image--max-width-720px がブランドロゴの可視タイトル） */
.container2:has(#mv) .image.cmp-image--max-width-720px {
    width: 100%;
    max-width: 793px;
    margin: 0 auto;
}

.container2:has(#mv) .image.cmp-image--max-width-720px .cmp-image__image {
    width: 100%;
    height: auto;
    object-fit: contain;
    position: relative;
    z-index: 2;
}

/* h1 タイトル：Serendie Office 72px（フォント未読込みの場合 fallback） */
.container2:has(#mv) .title .cmp-title__text {
    font-family: var(--font-serendie);
    font-weight: 400;
    font-size: 72px;
    line-height: 1.4;
    letter-spacing: 0.04em;
    text-align: center;
    color: var(--color-black);
    margin: 0;
    /* ロゴ画像を主とするため H1 は SR 用に視覚的に隠す */
    position: absolute !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    padding: 0;
    border: 0;
}
#mv .cmp-container2-child {
    height: 91vh;
}
#mv .cmp-container2-child .aem-Grid {
    position: absolute;
    top: calc(50% + 20px);
    left: 0;
    transform: translateY(-50%);
    max-width: 100%;
    gap: 10px;
}
/* button */
#mv .button {
    text-align: center;
    position: relative;
    z-index: 2;
}

/* semicircle-1（オートレイアウト無視の装飾画像） — position: absolute で配置 */
.container2:has(#mv) .image:not(.cmp-image--max-width-720px) {
    position: absolute;
    top: -33vh;
    left: 50%;
    transform: translateX(calc(-50% - 4px));
    max-width: 1380px;
    height: auto;
    max-width: 1380px;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
}

.container2:has(#mv) .image:not(.cmp-image--max-width-720px) .cmp-image__image {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* --------------------------------------------------------------------------
   4. sec-lead-text（リード文セクション）
   -------------------------------------------------------------------------- */
.container2:has(.sec-lead-text) {
    margin-top: 80vh;
}
.sec-lead-text {
    position: relative;
    width: 100%;
    background: url(/serendie/img/lead-about.jpg);
    background-size: cover;
}
.sec-lead-text::after{
    content: "";
    background: rgba(0,0,0,0.5);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.sec-lead-text > .cmp-container2-child {
    position: relative;
    width: 100%;
    min-height: 480px;
    padding: 0;
    height: 80vh;
}

#sec-lead-text .cmp-container2-child .aem-Grid {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    max-width: 100%;
}

#sec-lead-text .cmp-container2-child .aem-Grid .text {
    max-width: 1380px;
    margin: 0 auto;
}
/* リード白文字 */
.sec-lead-text .text.cmp-text--strong {
    width: 100%;
    text-align: center;
    position: relative;
    z-index: 2;
}

.sec-lead-text .text.cmp-text--strong p {
    font-family: var(--font-roboto);
    font-weight: 400;
    font-size: 36px;
    line-height: 1.4;
    text-align: center;
    color: var(--color-white);
    margin: 0;
}

/* semicircle-2（オートレイアウト無視の装飾画像）— position: absolute で配置 */
.sec-lead-text .image {
    position: absolute;
    left: 50%;
    top: calc(-50% + 80px);
    width: 100%;
    z-index: 1;
    pointer-events: none;
    max-width: 1380px !important;
    transform: translate(-50%, -46%);
}

.sec-lead-text .image .cmp-image__image {
    width: 100%;
    height: auto;
}

/* --------------------------------------------------------------------------
   5. back-light-green（map / movie / redbox を含むラッパー）
   -------------------------------------------------------------------------- */
.back-light-green {
    width: 100%;
}

.back-light-green > .cmp-container2-child {
    background-color: var(--color-cyan-light) !important;
    width: 100%;
    padding: 100px 0;
}

.back-light-green .cmp-container2.inner {
    width: 100%;
}



/* --------------------------------------------------------------------------
   5-1. map セクション（Purpose-built in Cambridge, MA.）
   -------------------------------------------------------------------------- */
.mediatext .map {
    width: 100%;
}

.mediatext .map .container.responsivegrid,
.mediatext .map .mediatextunit,
.gs21-Main .mediatext .map .container.responsivegrid > .cmp-container {
    width: 100%;
}

.map .mel25-mediatextUnitBox {
    align-items: center;
    gap: 36px;
    width: 100%;
}

.map .mel25-mediatextUnitMedia {
    flex: 0 0 auto;
    width: 40%;
    max-width: 554px;
}

.map .mel25-mediatextUnitMedia .image {
    width: 100%;
}

.map .mel25-mediatextUnitMedia .cmp-image__image {
    width: 100%;
    height: auto;
}

.map .mel25-mediatextUnitText {
    flex: 1 1 auto;
    min-width: 0;
}

.map .mel25-mediatextUnitText .cmp-title__text {
    font-family: var(--font-roboto);
    font-weight: 400;
    font-size: 48px;
    line-height: 1.4;
    color: var(--color-black);
    margin: 0;
}

.map .mel25-mediatextUnitText .text {
    margin-top: 30px;
}

.map .mel25-mediatextUnitText .text p {
    font-family: var(--font-roboto);
    font-weight: 300;
    font-size: 36px;
    line-height: 1.4;
    color: var(--color-black);
    margin: 0;
}
.mediatextunit {
    margin: 0 0 50px 0;
}

/* --------------------------------------------------------------------------
   5-2. cmp-text--under-line（青の大見出しテキスト）
   -------------------------------------------------------------------------- */
.gs21-Main .text.cmp-text--under-line {
    width: 100%;
    text-align: center;
}

.gs21-Main .text.cmp-text--under-line p {
    font-family: var(--font-roboto);
    font-weight: 400;
    font-size: 44px;
    line-height: 1.4;
    text-align: center;
    color: var(--color-cobalt);
    margin: 0;
    text-decoration: none;
    margin-bottom: 50px;
}

/* --------------------------------------------------------------------------
   5-3. movie セクション（Designed to move.）
   -------------------------------------------------------------------------- */
.gs21-Main .mediatext .movie {
    width: 100%;
}

.gs21-Main .mediatext .movie .container.responsivegrid,
.gs21-Main .mediatext .movie .mediatextunit,
.gs21-Main .mediatext .movie .container.responsivegrid > .cmp-container {
    width: 100%;
}

.gs21-Main .mediatext .movie .mel25-mediatextUnitBox {
    align-items: center;
    gap: 100px;
    width: 100%;
}

.gs21-Main .mediatext .movie .mel25-mediatextUnitMedia {
    flex: 1 1 60%;
    min-width: 0;
}

.gs21-Main .mediatext .movie .mel25-mediatextUnitMedia .embed,
.gs21-Main .mediatext .movie .mel25-mediatextUnitMedia .cmp-embed {
    width: 100%;
    aspect-ratio: 790 / 445;
    background: var(--color-black);
    overflow: hidden;
}

.gs21-Main .mediatext .movie .mel25-mediatextUnitMedia iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

.gs21-Main .mediatext .movie .mel25-mediatextUnitText {
    flex: 0 0 436px;
    width: 436px;
    max-width: 40%;
}

.gs21-Main .mediatext .movie .mel25-mediatextUnitText .cmp-title__text {
    font-family: var(--font-roboto);
    font-weight: 400;
    font-size: 48px;
    line-height: 1.4;
    color: var(--color-black);
    margin: 0;
}

.gs21-Main .mediatext .movie .mel25-mediatextUnitText .text {
    margin-top: 30px;
}

.gs21-Main .mediatext .movie .mel25-mediatextUnitText .text p {
    font-family: var(--font-roboto);
    font-weight: 300;
    font-size: 18px;
    line-height: 1.4;
    color: var(--color-black);
    margin: 0;
}

/* --------------------------------------------------------------------------
   5-4. redbox（Serendipity + Digital Engineering = Serendie）
   -------------------------------------------------------------------------- */
.gs21-Main .mediatext .redbox {
    width: 100%;
}

.gs21-Main .mediatext .redbox .container.responsivegrid,
.gs21-Main .mediatext .redbox .mediatextunit,
.gs21-Main .mediatext .redbox .container.responsivegrid > .cmp-container {
    width: 100%;
}

.gs21-Main .mediatext .redbox .mel25-mediatextUnitBox {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 0;
    width: 100%;
    max-width: 1380px;
    margin: 0 auto;
}

/* 画像（右） */
.gs21-Main .mediatext .redbox .mel25-mediatextUnitMedia {
    flex: 1 1 50%;
    order: 2;
    overflow: hidden;
}

.gs21-Main .mediatext .redbox .mel25-mediatextUnitMedia .image,
.gs21-Main .mediatext .redbox .mel25-mediatextUnitMedia .cmp-image {
    width: 100%;
    height: 100%;
}

.gs21-Main .mediatext .redbox .mel25-mediatextUnitMedia .cmp-image__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* テキスト（左 - 赤背景） */
.gs21-Main .mediatext .redbox .mel25-mediatextUnitText {
    flex: 1 1 50%;
    order: 1;
    background-color: var(--color-pink);
    padding: 80px 88px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 36px;
}

.gs21-Main .mediatext .redbox .mel25-mediatextUnitText .cmp-title__text {
    font-family: var(--font-roboto);
    font-weight: 700;
    font-size: 28px;
    line-height: 1.4;
    color: var(--color-black);
    margin: 0 0 40px 0;
}

.gs21-Main .mediatext .redbox .mel25-mediatextUnitText .text {
    margin: 0;
}

.gs21-Main .mediatext .redbox .mel25-mediatextUnitText .text p {
    font-family: var(--font-roboto);
    font-weight: 300;
    font-size: 18px;
    line-height: 1.4;
    color: var(--color-black);
    margin: 0;
}


/* --------------------------------------------------------------------------
   carousel
   -------------------------------------------------------------------------- */
.carousel {
    max-width: 1024px !important;
    margin: 0 auto 100px auto;
}

/* --------------------------------------------------------------------------
   3カードレイアウト共通
   -------------------------------------------------------------------------- */
.cardunit .title .cmp-title__text {
    font-size: 28px;
}


/* --------------------------------------------------------------------------
   6. sec-ourstories（3カードレイアウト）
   -------------------------------------------------------------------------- */
.gs21-Main section.cmp-container2.sec-ourstories,
.gs21-Main .cmp-container2.sec-ourstories {
    width: 100%;
}

.gs21-Main .cmp-container2.sec-ourstories > .cmp-container2-child {
    max-width: var(--content-width);
    margin: 0 auto;
    padding: 100px 0;
    box-sizing: border-box;
}

.gs21-Main .cmp-container2.sec-ourstories > .cmp-container2-child > .aem-Grid {
    display: flex !important;
    flex-direction: column;
    gap: 56px !important;
}

.back-light-green .title h2.cmp-title__text {
    font-family: var(--font-roboto);
    font-weight: 400;
    font-size: 48px;
    line-height: 1.4;
    color: var(--color-black);
    margin: 0;
}

/* --------------------------------------------------------------------------
   7. sec-leaders
   -------------------------------------------------------------------------- */
.gs21-Main section.cmp-container2.sec-leaders,
.gs21-Main .cmp-container2.sec-leaders {
    width: 100%;
}
.sec-leaders .mel25-cardColumn--set03 {
    max-width: 1026px;
    margin: 40px auto;
}
.sec-leaders .image .cmp-image img {
    border-radius: 50%;
}
.sec-leaders .image .cmp-image {
    background: none;
}
.sec-leaders .mel25-cardunit__txtArea__top {
    text-align: center;
}


/* --------------------------------------------------------------------------
   8. sec-news（タイトル / コンテンツ枠のみ）
   -------------------------------------------------------------------------- */
.gs21-Main section.cmp-container2.sec-news,
.gs21-Main .cmp-container2.sec-news {
    width: 100%;
}

.text.cmp-text--date p {
    text-align: left;
}

/* --------------------------------------------------------------------------
   9. sec-contact（最下部 Get in touch.）
   -------------------------------------------------------------------------- */
.gs21-Main section.cmp-container2.sec-contact,
.gs21-Main .cmp-container2.sec-contact {
    width: 100%;
}

.gs21-Main .cmp-container2.sec-contact > .cmp-container2-child {
    width: 100%;
    padding: 88px 0;
}

.gs21-Main .cmp-container2.sec-contact > .cmp-container2-child > .aem-Grid {
    max-width: var(--content-width);
    margin: 0 auto;
    padding: 0 var(--content-padding-x);
    box-sizing: border-box;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    gap: 30px !important;
}

.gs21-Main .cmp-container2.sec-contact .title {
    width: 100%;
    text-align: center;
}

.gs21-Main .cmp-container2.sec-contact .title .cmp-title__text {
    font-family: var(--font-roboto);
    font-weight: 400;
    font-size: 48px;
    line-height: 1.4;
    text-align: center;
    color: var(--color-black);
    margin: 0;
}

.gs21-Main .cmp-container2.sec-contact .text {
    width: 100%;
    text-align: center;
    max-width: 720px;
}

.gs21-Main .cmp-container2.sec-contact .text p {
    font-family: var(--font-roboto);
    font-weight: 300;
    font-size: 18px;
    line-height: 1.4;
    text-align: center;
    color: var(--color-black);
    margin: 0;
}
.gs21-Main .cmp-container2.sec-contact > .cmp-container2-child .button {
    text-align: center;
}


/* --------------------------------------------------------------------------
  10. レスポンシブ
   -------------------------------------------------------------------------- */
@media screen and (max-width: 1199px) {
    .gs21-Main .mediatext .redbox .mel25-mediatextUnitText {
        padding: 60px 48px;
    }

    .gs21-Main .mediatext .movie .mel25-mediatextUnitBox {
        gap: 60px;
        flex-direction: column;
    }
    .gs21-Main .mediatext .movie .mel25-mediatextUnitMedia {
        flex: 0;
        width: 100%;
    }
}

@media screen and (max-width: 991px) {
    .gs21-Main .mediatext .redbox .mel25-mediatextUnitText {
        padding: 48px 24px;
    }

    .gs21-Main .mediatext .map .mel25-mediatextUnitText .cmp-title__text,
    .gs21-Main .mediatext .movie .mel25-mediatextUnitText .cmp-title__text,
    .gs21-Main .cmp-container2.sec-ourstories .title .cmp-title__text,
    .gs21-Main .cmp-container2.sec-leaders .title .cmp-title__text,
    .gs21-Main .cmp-container2.sec-news .title .cmp-title__text,
    .gs21-Main .cmp-container2.sec-contact .title .cmp-title__text {
        font-size: 36px;
    }

    .gs21-Main .mediatext .map .mel25-mediatextUnitText .text p {
        font-size: 24px;
    }

    .gs21-Main section.cmp-container2.main .title .cmp-title__text,
    .gs21-Main section.cmp-container2.main .image.cmp-image--max-width-720px {
        max-width: 90%;
    }
    .sec-lead-text > .cmp-container2-child {
        height: 60vh;
    }
    .sec-lead-text .image {
        top: calc(-50% + 100px);
    }
}

@media screen and (max-width: 767px) {
    .gs21-Main .cmp-container2.sec-ourstories > .cmp-container2-child > .aem-Grid{
        padding: 0;
    }
    .gs21-Main .cmp-container2.sec-ourstories > .cmp-container2-child {
        padding: 60px 0;
    }
    .gs21-Main .mediatext .map .mel25-mediatextUnitText .text p {
        font-size: 18px;
    }

    .gs21-Main .cmp-container2.sec-contact > .cmp-container2-child {
        padding: 56px 0;
    }
    .map .mel25-mediatextUnitMedia {
        width: 100%;
    }
    
    .container2:has(#mv) {
        height: 60vh;
    }
    .container2:has(#mv) .image:not(.cmp-image--max-width-720px) {
        top: -21vh;
    }
    .container2:has(.sec-lead-text) {
        margin-top: 60vh;
    }
    .sec-lead-text .image {
        top: calc(-50% + 0px);
    }
    .back-light-green > .cmp-container2-child {
        padding: 60px 0;
    }
    .sec-lead-text .text.cmp-text--strong p {
        font-size: 1.6rem;
    }
    .sec-lead-text > .cmp-container2-child {
        height: auto;
    }


    .gs21-Main .text.cmp-text--under-line p {
        font-size: 1.8rem;
    }
    .carousel {
        margin: 0 auto 60px auto;
    }
    .gs21-Main .mediatext .redbox .mel25-mediatextUnitBox {
        flex-direction: column;
    }
    .gs21-Main .mediatext .redbox .mel25-mediatextUnitMedia{
        padding-top: 0!important;
    }
    .gs21-Main .mediatext .movie .mel25-mediatextUnitBox {
        gap: 10px;
    }
    .gs21-Main .mediatext .movie .mel25-mediatextUnitText {
        width: 100%;
        flex: 0;
    }
    #serendieSB .card.aem-GridColumn .mel25-cardColumn--set03>.container>.cmp-container .title h3 {
        font-size: 1.6rem;
    }
    .sec-leaders .mel25-cardColumn--set03 .image {
        width: 80%;
        margin: 0 auto;
    }
    .sec-news .cmp-container2-child .aem-Grid.aem-Grid--12 {
        padding: 0;
    }
}