@charset "utf-8";

/*
 * File    : rwd-style.css
 * Author  : STUDIO-JT (KMS)
 *
 * SUMMARY :
 * MIN-WIDTH 541
 * MIN-WIDTH 1200
 * HOVER
 */



/* **************************************** *
 * MIN-WIDTH 541
 * **************************************** */
@media (min-width: 541px){

    /* GLOBAL */
    html { font-size: 6.25%; }
    html.safari.desktop { font-size: 1px; }

    body { background: #C4D5E4; }

    .body-gradient { display: block; position: fixed; top: 0; right: 0; bottom: 0; left: 0; overflow: hidden; }
    .body-gradient > span { position: absolute; width: 141.5vw; height: 141.5vw; top: 50%; left: 50%; background: radial-gradient(50% 50% at 50% 50%, rgba(255, 255, 255, .8) 0%, rgba(255, 255, 238, 0) 100%); border-radius: 50%; transform: translate(-50%, -50%); animation: twinkle 10s linear infinite; }

    .global-container { width: var(--container-width); margin: 0 auto; background: var(--color-white); }

    /* HEADER */
    #header { width: var(--container-width); left: calc(50% - var(--container-width) / 2); }

    /* COMPONENT */
    .sticky-banner { width: calc(var(--container-width) - 32rem); left: calc(50% - ( var(--container-width) - 32rem ) / 2); }

    .ribbon-banner > div { width: 462rem; }

    /* HONESTY */
    .honesty__percent { margin-top: -21rem; padding-top: 35rem; }

}



/* **************************************** *
 * MIN-WIDTH 1200
 * **************************************** */
@media (min-width: 1200px){

    /* FOOTER */
    #footer { padding-bottom: 0; }
    .footer__inner { padding-bottom: 28rem; }

    /* COMPONENT */
    .sticky-banner { display: none; }

    /* VISUAL */
    .visual { height: calc( var(--section-fvh) - 45rem ); }

    .visual__scroll-button { bottom: 3rem; }

    /* SPONSOR */
    .sponsor { display: none; }

    /* LARGE SCREEN SLOGAN */
    .lscreen-slogan { display: block; width: 242rem; position: fixed; top: 50%; left: calc(50% - var(--container-width) - 93rem); transform: translate(0, -50%); }

    .lscreen-slogan__pic { width: 104rem; margin: 0 auto; }
    .lscreen-slogan__pic > .jt-lazyload { padding-top: 93.26%; }
    
    .lscreen-slogan > p { margin-top: 4rem; color: color-mix(in srgb, var(--color-pms-300) 65%, transparent 35%); text-align: center; }

    /* LARGE SCREEN SPONSOR */
    .lscreen-sponsor { display: block; width: 200rem; position: fixed; top: 50%; right: calc(50% - var(--container-width) - 50rem); transform: translate(0, -50%); opacity: 0; }
    .lscreen-sponsor__list-item { width: 100%; color: var(--color-pms-300); }

    .lscreen-sponsor__list-name { display: block; margin-bottom: 12rem; }
    .lscreen-sponsor__list-image { width: 100%; position: relative; aspect-ratio: 1 / 1.33; border-radius: var(--radius-01); overflow: hidden; }
    .lscreen-sponsor__list-image img { display: block; width: 100%; height: auto; position: absolute; top: 50%; left: 0; transform: translateY(-50%); }
    .lscreen-sponsor__list-info { display: flex; flex-direction: column; gap: 16rem; margin-top: 8rem; }
    .lscreen-sponsor__list-btn { display: flex; align-items: center; justify-content: center; gap: 16rem; padding: 12rem 0; color: var(--color-white); background: var(--color-pms-300); border-radius: var(--radius-01); transition: background-color .3s; }
    .lscreen-sponsor__list-btn > i { width: 24rem; height: 24rem; background: url(../images/icon/heart.svg) no-repeat center / contain; }

}



/* **************************************** *
 * HOVER
 * **************************************** */
@media (hover: hover) and (pointer: fine) {

    /* LARGE SCREEN SPONSOR */
    .lscreen-sponsor__list-btn:hover { background: var(--color-pms-7460); }

}