@charset "utf-8";

:root {
    --color-bg: #f9fafb;
    --color-bg-line-01: linear-gradient(rgba(237, 29, 29, .2) 1px, transparent 0), linear-gradient(90deg, rgba(237, 29, 29, .2) 1px, transparent 0);
    --color-bg-line-02: linear-gradient(rgba(155, 155, 155, 0.2) 1px, transparent 0), linear-gradient(90deg, rgb(202 202 202 / 20%) 1px, transparent 0);
    --color-white: #fff;
    --color-white-opc: rgba(255 255 255 / 0.8);
    --color-black: #000;
    --color-gray: #969696;
    --color-main: #ED931D;
    --color-beginning: #A5FF00;
    --color-challenge: #FF00FF;
    --color-growth: #00FFFF;

    --fint-common: "Roboto", "Noto Sans JP", sans-serif;
    --font-title: "Alfa Slab One", serif;
}



/*===================================================
  AOP
====================================================*/
body .wrap {
    padding: 0;
}

body .wrap #header-nav,
body .wrap footer {
    display: none;
}

@media screen and (max-width: 960px) {

    body .wrap:not(.page--home) {
        padding: 0;
    }

    body .wrap h1,
    body .wrap .drawer__btn {
        display: none;
    }

}



/*===================================================
    bgBox
====================================================*/
.bgBox {
    position: absolute;
    z-index: -1;
    width: 100%;
    height: 100%;
    min-height: 100vh;
    left: 0;
    top: 0;
    background: var(--color-bg);
    overflow: hidden;
    box-sizing: border-box;
    pointer-events: none;
}
.bgBox div {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
}
.bgBox .bg01 {
    z-index: 2;
    background-image: var(--color-bg-line-01);
    background-size: 40px 40px;
}
.bgBox .bg02 {
    z-index: 1;
    width: calc(100% + 80px);
    height: calc(100% + 80px);
    left: -37px;
    top: -37px;
    background-image: var(--color-bg-line-02);
    background-size: 40px 40px;
}
.bgBox .bg03 {
    z-index: 3;
    background-image: url(/static/fcopen/fanplakit/artist/sneaker_step_gbhnjk/feature/first-connect_fc/image/bg.png);
    background-position: center top;
    background-size: 100%;
    background-repeat: repeat-y;
}
.bgBox .bg04 {
    z-index: 4;
    background-image: url(/static/fcopen/fanplakit/artist/sneaker_step_gbhnjk/feature/first-connect_fc/image/bg_sticker.png);
    background-position: center top;
    background-size: 100%;
    background-repeat: repeat-y;
}
.bgBox .bg05 {
    z-index: 4; 
}

@media screen and (max-width: 960px){

	.bgBox {}
	.bgBox div {}
    .bgBox .bg01 {
        background-size: 30px 30px;
    }
    .bgBox .bg02 {
        background-size: 30px 30px;
        width: calc(100% + 60px);
        height: calc(100% + 60px);
        left: -28px;
        top: -28px;
    }
    .bgBox .bg03 {}
    .bgBox .bg04 {
        display: none;
    }
    .bgBox .bg05 {
        background-image: url(/static/fcopen/fanplakit/artist/sneaker_step_gbhnjk/feature/first-connect_fc/image/bg_sticker_sp.png);
        background-position: center top;
        background-size: 100%;
        background-repeat: repeat-y;
    }

}



/*===================================================
	ALL
====================================================*/
html {}

.mainWrap {
    position: relative;
    z-index: 1;
    font-size: 16px;
    line-height: 1.5;
    color: var(--color-black);
    font-family: var(--fint-common);
    padding: 0 0 20px;
}
.mainWrap img {
    display: block;
}

#heroView {
    display: flex;
    justify-content: center;
    margin: 0 auto 120px;
}
#heroView .heroInner {}
#heroView .heroInner .kv {
    max-width: 1920px;
    margin: 0 auto;
}

#lead {
    background: var(--color-white-opc);
    padding: 120px 0;
    margin-bottom: 160px;
}
#lead .leadTit {
    width: 90%;
    margin: 0 auto 60px;
    max-width: 800px;
    text-align: left;
}
#lead .leadBox {
    width: 90%;
    max-width: 1000px;
    margin: 0 auto;
    text-align: left;
}
#lead .leadBox p {
    font-size: 20px;
    margin-bottom: 20px;
}
#lead .leadBox p:last-child {
    margin-bottom: 0;
}
    
section {
    width: 90%;
    max-width: 1000px;
    margin: 0 auto 160px;
}
section#Beginning {}
section#Challenge {}
section#Growth {
    margin: 0 auto 240px;
}

section h3 {
    position: relative;
    margin: 0 auto 40px;
}
section h3 img {
    width: 50%;
    margin: 0 auto;
}
section h3 svg {
    position: absolute;
    pointer-events: none;
    top: 50%;
    transform: translateY(-50%);
    height: 75%;
    width: auto;
}
section h3 .icon-heart {
    left: 0;
}
section h3 .icon-thunder {
    right: 0;
}

section .inBox {
    background-color: var(--color-white);
    margin-bottom: 40px;
    border-radius: 20px;
}
section#Beginning .inBox {}
section#Challenge .inBox {}
section#Growth .inBox {}

section .inBox .inBoxTit {
    padding: 30px 40px;
    font-size: 32px;
    letter-spacing: 0.03em;
    text-align: center;
    font-family: var(--font-title);
}
section .inBox .inBoxTit span {
    padding: 0 0 0 8px;
}

.mainWrapDetail section .inBox .inBoxTit {
    font-weight: bold;
    font-size: 28px;
    font-family: var(--fint-common);
}

section#Beginning .inBox .inBoxTit {}
section#Challenge .inBox .inBoxTit {}
section#Growth .inBox .inBoxTit {}

section .inBox .inBoxDetail {
    padding: 0 40px 40px;
}
section#Beginning .inBox .inBoxDetail {}
section#Challenge .inBox .inBoxDetail {}
section#Growth .inBox .inBoxDetail {}

section .inBox .inBoxDetail .detailTxt {
    margin-bottom: 20px;
}
section .inBox .inBoxDetail .detailTxt:last-child {}
section .inBox .inBoxDetail .detailTxt:last-of-type {
    margin-bottom: 0;
}
section .inBox .inBoxDetail .detailTxt p {
    margin-bottom: 5px;
}
section .inBox .inBoxDetail .detailTxt p:last-child {
    margin-bottom: 0;
}

section .inBox .inBoxDetail .mov {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
    margin-top: 40px;
}
section .inBox .inBoxDetail .mov iframe {
	position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
}

section .inBox .inBoxDetail .attBox {
    margin-top: 40px;
    border: 1px solid var(--color-growth);
}
section .inBox .inBoxDetail .attBox:last-child {
    margin-top: 20px;
}
section .inBox .inBoxDetail .attBox .attTit {
    text-align: center;
    background: var(--color-growth);
    font-weight: bold;
    padding: 10px 15px;
}
section .inBox .inBoxDetail .attBox .attList {
    padding: 20px;
}
section .inBox .inBoxDetail .attBox .attList li {
    font-size: 14px;
    margin-bottom: 5px;
    text-indent: -1em;
    padding: 0 0 0 1em;
}
section .inBox .inBoxDetail .attBox .attList li:last-child {
    margin-bottom: 0;
}
section .inBox .inBoxDetail .attBox .attList li a {
    text-decoration: underline;
    color: var(--color-black);
}

section .boxBtn a {
    display: block;
    width: 90%;
    max-width: 300px;
    text-align: center;
    margin: 40px auto 0;
    background: var(--color-main);
    color: var(--color-white);
    border: 1px solid var(--color-main);
    padding: 20px;
    font-weight: bold;
    border-radius: 100vmax;
    line-height: 1.5;
}
section .boxBtn.l2 a {
    padding: 15px 20px;
}
section .boxBtn.soon a {
    pointer-events: none;
    background: var(--color-gray);
    border: 1px solid var(--color-gray);
}

.emoji {
    display: inline-block;
    width: 14px;
    height: 14px;
    background-size: contain;
    position: relative;
    margin: 0px 0 0 2px;
}
.emoji.emoji01 {background-image:url('/static/fcopen/fanplakit/artist/sneaker_step_gbhnjk/feature/first-connect_fc/image/emoji/ph_emoji_01.png');}
.emoji.emoji02 {background-image:url('/static/fcopen/fanplakit/artist/sneaker_step_gbhnjk/feature/first-connect_fc/image/emoji/ph_emoji_02.png');}
.emoji.emoji03 {background-image:url('/static/fcopen/fanplakit/artist/sneaker_step_gbhnjk/feature/first-connect_fc/image/emoji/ph_emoji_03.png');}
.emoji.emoji04 {background-image:url('/static/fcopen/fanplakit/artist/sneaker_step_gbhnjk/feature/first-connect_fc/image/emoji/ph_emoji_04.png');}
.emoji.emoji05 {background-image:url('/static/fcopen/fanplakit/artist/sneaker_step_gbhnjk/feature/first-connect_fc/image/emoji/ph_emoji_05.png');}
.emoji.emoji06 {background-image:url('/static/fcopen/fanplakit/artist/sneaker_step_gbhnjk/feature/first-connect_fc/image/emoji/ph_emoji_06.png');}
.emoji.emoji07 {background-image:url('/static/fcopen/fanplakit/artist/sneaker_step_gbhnjk/feature/first-connect_fc/image/emoji/ph_emoji_07.png');}
.emoji.emoji08 {background-image:url('/static/fcopen/fanplakit/artist/sneaker_step_gbhnjk/feature/first-connect_fc/image/emoji/ph_emoji_08.png');}
.emoji.emoji09 {background-image:url('/static/fcopen/fanplakit/artist/sneaker_step_gbhnjk/feature/first-connect_fc/image/emoji/ph_emoji_09.png');}
.emoji.emoji10 {background-image:url('/static/fcopen/fanplakit/artist/sneaker_step_gbhnjk/feature/first-connect_fc/image/emoji/ph_emoji_10.png');}
.emoji.emoji11 {background-image:url('/static/fcopen/fanplakit/artist/sneaker_step_gbhnjk/feature/first-connect_fc/image/emoji/ph_emoji_11.png');}

.copy {
    text-align: center;
    font-size: 10px;
}

@media screen and (min-width:961px) {
    
    .sp {
        display: none;
    }

    a, i, img {
        -webkit-transition: all 0.3s ease-out;
        transition: all 0.3s ease-out;
    }

    #lead .leadBox {
        padding: 0 40px;
    }

    section .boxBtn a:hover {
        background: var(--color-white);
        color: var(--color-main);
    }

    section .inBox .inBoxDetail .attBox .attList li a:hover {
        opacity: 0.7;
    }

}

@media screen and (max-width:960px) {
    
    .pc {
        display: none;
    }

    html {}

    .mainWrap {
        font-size: 14px;
    }

    #heroView {
        margin: 0 auto 80px;
    }
    #heroView .heroInner {}
    #heroView .heroInner .artistLogo {}

    #lead {
        padding: 60px 0;
        margin-bottom: 80px;
    }
    #lead .leadTit {
        margin: 0 auto 30px;
    }
    #lead .leadBox {
        text-align: left;
    }
    #lead .leadBox p {
        font-size: 16px;
        margin-bottom: 10px;
        line-height: 1.6;
    }
    #lead .leadBox p:last-child {}
        
    section {
        margin: 0 auto 80px;
    }
    section#Beginning {}
    section#Challenge {}
    section#Growth {
        margin: 0 auto 160px;
    }

    section h3 {
        margin: 0 auto 20px;
    }
    section h3 img {
        width: 70%;
        max-width: 450px;
    }
    section h3 svg {}
    section h3 .icon-heart {
        left: -1.5%;
        aspect-ratio: 100 / 120;
    }
    section h3 .icon-thunder {
        right: -1.5%;
        aspect-ratio: 100 / 130;
    }

    section .inBox {
        margin-bottom: 20px;
        border-radius: 10px;
    }
    section#Beginning .inBox {}
    section#Challenge .inBox {}
    section#Growth .inBox {}

    section .inBox .inBoxTit {
        padding: 20px 20px 15px;
        font-size: 28px;
        line-height: 1;
    }
    section .inBox .inBoxTit span {
        padding: 5px 0 0;
        display: block;
        font-size: 16px;
    }

    .mainWrapDetail section .inBox .inBoxTit {
        font-size: 24px;
    }

    section#Beginning .inBox .inBoxTit {}
    section#Challenge .inBox .inBoxTit {}
    section#Growth .inBox .inBoxTit {}

    section .inBox .inBoxDetail {
        padding: 0 20px 20px;
    }
    section#Beginning .inBox .inBoxDetail {}
    section#Challenge .inBox .inBoxDetail {}
    section#Growth .inBox .inBoxDetail {}

    section .inBox .inBoxDetail .detailTxt {
        margin-bottom: 10px;
    }
    section .inBox .inBoxDetail .detailTxt:last-child {}
    section .inBox .inBoxDetail .detailTxt:last-of-type {}
    section .inBox .inBoxDetail .detailTxt p {}
    section .inBox .inBoxDetail .detailTxt p:last-child {}

    section .inBox .inBoxDetail .mov {
        margin-top: 20px;
    }
    section .inBox .inBoxDetail .mov iframe {}

    section .inBox .inBoxDetail .attBox {
        margin-top: 20px;
    }
    section .inBox .inBoxDetail .attBox:last-child {
        margin-top: 10px;
    }
    section .inBox .inBoxDetail .attBox .attTit {}
    section .inBox .inBoxDetail .attBox .attList {
        padding: 15px;
    }
    section .inBox .inBoxDetail .attBox .attList li {
        font-size: 12px;
    }
    section .inBox .inBoxDetail .attBox .attList li:last-child {}

    section .boxBtn a {
        font-size: 16px;
        padding: 15px;
        margin: 20px auto 0;
    }

    section .emoji {}
    section .emoji.emoji01 {}
    section .emoji.emoji02 {}
    section .emoji.emoji03 {}
    section .emoji.emoji04 {}
    section .emoji.emoji05 {}
    section .emoji.emoji06 {}
    section .emoji.emoji07 {}
    section .emoji.emoji08 {}
    section .emoji.emoji09 {}

    .copy {}

}






/*===================================================
  mainWrapDetail
====================================================*/
.mainWrap.mainWrapDetail {
    padding: 120px 0 20px;
}

.mainWrap.mainWrapDetail section#Challenge {
    margin-bottom: 240px;
}

.mainWrap.mainWrapDetail section#Challenge .inBox .inBoxTit .emoji {
    width: 24px;
    height: 24px;
    margin: 0px 0 0 4px;
}

.mainWrap.mainWrapDetail section .boxBtn a {
    max-width: 150px;
    padding: 10px;
    font-size: 14px;
}

@media screen and (max-width: 960px) {

    .mainWrap.mainWrapDetail {
        padding: 60px 0 20px;
    }

    .mainWrap.mainWrapDetail section#Challenge {
        margin-bottom: 160px;
    }

    .mainWrap.mainWrapDetail section#Challenge .inBox .inBoxTit {
        line-height: 1.4;
        font-size: 18px;
        text-align: left;
    }
    .mainWrap.mainWrapDetail section#Challenge .inBox .inBoxTit .emoji {
        display: inline-block;
        width: 16px;
        height: 16px;
    }

    .mainWrap.mainWrapDetail section .boxBtn a {}

}