@charset "utf-8";
@import url(layout.css);

:root {
    --theme: #fdc615;
    --theme-font: #f0b700;
    --theme-light: #ffe7a3;
    --accent: #d76c69;
    --accent-font: #f5d4cf;
    --main-dim: 0, 0, 0;
}

h1 {
    position: relative;
    width: 100%;
    height: 0;
    margin: 0 auto
}

.sec-tit {
    color: var(--black);
    font-weight: 500;
    letter-spacing: -.04em
}

.sec-tit .t-box {
    font-weight: 700
}

.words {
    background: rgba(255, 255, 255, .7);
    border-radius: .25rem
}

.words.theme {
    background: var(--theme-font)
}

.hidden {
    font-size: 0;
    line-height: 0;
    text-indent: -.1rem;
    visibility: hidden
}

.video-wrapper {
    position: relative;
    overflow: hidden
}

.video-wrapper>video {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.video-preview {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .8);
    transition: opacity .15s ease-out
}

.video-preview:before {
    content: "";
    display: block;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: url(images/bt-play.png) no-repeat center/ contain
}

.video-wrapper>video.playing+.video-preview {
    opacity: 0
}

.sec-faq {
    background: linear-gradient(180deg, #414141 0%, #1e1e1e 100%);
    color: var(--black)
}

.sec-faq::before {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    pointer-events: none;
    bottom: 0;
    right: 0;
    background: url(images/noise.png) repeat center;
    mix-blend-mode: screen;
}

.sec-faq .tit {
    font-weight: 700;
    letter-spacing: -.065em;
    color: var(--theme-font);
    text-align: center
}

.faq-tab {
    margin: 0 auto;
    display: flex;
    align-items: stretch
}

.faq-tab>li {
    display: block;
    flex: 1;
    position: relative;
    overflow: hidden
}

.faq-tab>li input {
    font-size: 1px;
    line-height: 1px;
    position: absolute;
    right: 100%;
    bottom: 100%
}

.faq-tab>li label {
    cursor: pointer;
    display: inline-block;
    text-align: center;
    width: 100%;
    vertical-align: middle;
    background: var(--theme-light);
    border-radius: .12rem;
    color: var(--black);
    transition: color .1s ease-out, background-color .1s ease-out
}

.faq-tab>li input:checked+label {
    background: var(--black);
    color: var(--theme)
}

.faq-list>li {
    background: var(--white);
    color: #131112;
    border-radius: .12rem;
    color: var(--black);
    position: relative;
    overflow: hidden;
    height: 0;
    opacity: 0;
    pointer-events: none
}

.faq-list>li.visible {
    opacity: 1;
    pointer-events: auto;
    height: auto
}

.faq-list .question {
    height: auto;
    display: flex;
    box-sizing: border-box;
    align-items: start
}

.faq-list .question .q {
    flex: none;
    object-fit: contain
}

.faq-list .question>p {
    flex: 1;
    font-weight: 700;
    letter-spacing: -.075em;
    text-align: left;
    word-wrap: break-word;
    word-break: keep-all;
    white-space: wrap
}

.faq-list .question>button {
    flex: none;
    position: relative;
    height: .51rem;
    background: var(--white);
    color: transparent;
    font-size: 0;
    line-height: 0
}

.faq-list .question>button:before,
.faq-list .question>button:after {
    content: "";
    position: absolute;
    display: block;
    left: 50%;
    top: 50%;
    background: #131112
}

.faq-list .question>button:after {
    transform: translate(-50%, -50%);
    transition: transform .25s ease-out
}

.faq-list .question>button:before {
    transform: translate(-50%, -50%);
    transition: transform .25s ease-out
}

.faq-list .answer {
    height: auto;
    position: relative;
    font-size: 0;
    line-height: 0;
    transition: all .25s linear
}

.faq-list .answer:before {
    content: "";
    position: absolute;
    top: 0;
    height: .02rem;
    background: var(--theme)
}

.faq-list .answer p {
    display: block;
    font-weight: 500;
    line-height: .51rem;
    letter-spacing: -.06em;
    position: relative;
    word-wrap: break-word;
    word-break: keep-all;
    white-space: wrap
}

.faq-list .answer p.stit {
    font-weight: 700;
    color: var(--theme-font)
}

.faq-list .answer p.dot:before {
    content: "";
    position: absolute;
    top: .26rem;
    transform: translateY(-50%);
    display: block;
    background: var(--theme);
    border-radius: 100%
}

.faq-list .answer p .divider {
    display: inline-block;
    font-size: .75em;
    vertical-align: top;
    width: 1.4em;
    color: #a5a5a5;
    text-align: center
}

.faq-list .closed .question>button:after {
    transform: translate(-50%, -50%) rotate(-90deg)
}

.faq-list .closed .question>button:before {
    transform: translate(-50%, -50%) rotate(180deg)
}

.faq-list .closed .answer {
    height: 0;
    overflow: hidden;
    padding-top: 0;
    padding-bottom: 0
}

.appears {
    transition: transform .25s ease-out
}

.appears.in-view {
    opacity: 1;
    transition-delay: .65s
}

@media screen and (min-width:1001px) {

    .bi {
        max-width: none
    }

    .sec-tit {
        font-size: .9rem;
        line-height: 1.3rem
    }

    .sec-faq {
        padding: 1.6rem 0
    }

    .sec-faq .tit {
        font-size: .81rem;
        line-height: .92rem
    }

    .faq-tab {
        width: 12rem;
        padding-top: .94rem;
        height: .94rem;
        gap: .16rem
    }

    .faq-tab label {
        font-size: .35rem;
        letter-spacing: -.025em;
        line-height: .44rem;
        font-weight: 600;
        padding: .25rem 0
    }

    .faq-tab>li input+label:hover {
        background: var(--black);
        color: var(--theme)
    }

    .faq-list {
        width: 12rem;
        margin: 0 auto
    }

    .faq-list>li.visible {
        margin-top: .2rem;
        padding-bottom: .1rem
    }

    .faq-list .answer {
        padding: .25rem .44rem
    }

    .faq-list .answer:before {
        left: .44rem;
        right: .44rem
    }

    .faq-list .answer p {
        font-size: .26rem;
        padding: 0 0 0 .3rem
    }

    .faq-list .answer p.stit {
        font-size: .3rem;
        line-height: .44rem;
        padding-top: .15rem;
        padding-bottom: .15rem
    }

    .faq-list .answer p+p.stit {
        margin-top: .16rem
    }

    .faq-list .answer p.dot:before {
        width: .05rem;
        height: .05rem;
        left: .18rem
    }

    .faq-list .question {
        padding: .38rem .48rem .28rem
    }

    .faq-list .question .qmark {
        width: .36rem;
        padding: .08rem
    }

    .faq-list .question .qmark img {
        width: 100%;
        display: block;
    }

    .faq-list .question>button {
        width: .5rem;
        margin: 0 .1rem 0 0
    }

    .faq-list .question>button:before,
    .faq-list .question>button:after {
        width: .32rem;
        height: .05rem
    }

    .faq-list .question>p {
        font-size: .32rem;
        line-height: .5rem;
        padding-left: .12rem
    }
}


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

    .sec-tit {
        font-size: .6rem;
        line-height: .8rem
    }

    .sec-faq {
        padding: 1.5rem 0
    }

    .sec-faq .tit {
        font-size: .7rem;
        line-height: .8rem
    }

    .faq-tab {
        width: 7.4rem;
        max-width: calc(100% - .6rem);
        padding-top: .72rem;
        height: .9rem;
        gap: .12rem
    }

    .faq-tab label {
        font-size: .35rem;
        letter-spacing: -.025em;
        line-height: .4rem;
        font-weight: 600;
        padding: .25rem 0
    }

    .faq-list {
        width: 7.4rem;
        max-width: calc(100% - .6rem);
        padding-top: .22rem;
        margin: 0 auto
    }

    .faq-list>li.visible {
        margin-top: .2rem;
        padding-bottom: .12rem
    }

    .faq-list .answer {
        padding: .35rem .38rem
    }

    .faq-list .answer:before {
        left: .38rem;
        right: .38rem
    }

    .faq-list .answer p {
        font-size: .25rem;
        line-height: .5rem;
        padding: 0 0 0 .08rem
    }

    .faq-list .answer p.dot {
        padding-left: .2rem
    }

    .faq-list .answer p.dot:before {
        width: .05rem;
        height: .05rem;
        left: .8rem
    }

    .faq-list .answer p.stit {
        font-size: .33rem;
        line-height: .5rem;
        padding-top: .2rem;
        padding-bottom: .2rem
    }

    .faq-list .answer p+p.stit {
        margin-top: .44rem
    }

    .faq-list .question {
        padding: .38rem .3rem .24rem .4rem
    }

    .faq-list .question .qmark {
        width: .5rem;
        margin-top: .08rem
    }

    .faq-list .question>button {
        width: .6rem;
        margin-top: .08rem
    }

    .faq-list .question>button:before,
    .faq-list .question>button:after {
        width: .42rem;
        height: .06rem
    }

    .faq-list .question>p {
        font-size: .46rem;
        line-height: .66rem;
        padding-left: .18rem;
        padding-right: .18rem
    }
}




.sec-main {
    background: linear-gradient(180deg, #fdc615 25%, #fff 75%);
    color: var(--black);
    overflow: hidden
}

.sec-main .with {
    letter-spacing: -.025em;
}

.sec-main .with .t-box {
    color: var(--theme-font)
}

.sec-main .with .t-box strong {
    font-weight: 600
}

.sec-main .sec-tit {
    letter-spacing: -.04em;
    font-weight: 800
}


.sec-main .dc {
    letter-spacing: -.05em;
}

.sec-main .dc strong {
    font-weight: 600
}

.sec-main .container::before {
    content: "";
    display: block;
    background-position: center bottom;
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    bottom: 0;
    height: 90%;
    transform: translateX(-50%);
}

@media screen and (min-width:1001px) {
    .sec-main,
    .sec-main .container {
        height:100%;
        min-height:9.6rem;
        max-height: 16rem;
    }
    .sec-main .container {
        max-width: 19.2rem
    }

    .sec-main .container::before {
        width:85.15%;
        max-width: 16.35rem;
        left: 25%;
        background-image: url(images/main-kv.png)
    }

    .sec-main .aligner {
        text-align: right;
        padding:.5rem .25rem 1rem
    }

    .sec-main .aligner .donation-link {
        width: 4.32rem;
        display: inline-block;
        margin-right: -.16rem;
        margin-top: .65rem
    }

    .sec-main .with {
        font-size: .32rem;
        line-height: .44rem;
        padding-right: .16rem;
        padding-bottom: .16rem
    }

    .sec-main .with .t-box {
        line-height: .37rem
    }

    .sec-main .sec-tit {
        font-size: 1.12rem;
        line-height: 1.35rem;
        padding-bottom: .6rem
    }

    .sec-main .dc {
        font-size: .22rem;
        line-height: .4rem
    }
}

@media screen and (max-width:1000px) {
    .sec-main,
    .sec-main .container {
        height: 14.4rem;
        min-height: 12.8rem;
    }

    .sec-main .container::before {
        width: 12rem;
        left: 50%;
        background-image: url(images/main-kv_m.png)
    }

    .sec-main .aligner {
        text-align: right;
        padding-right: .4rem
    }

    .sec-main .with {
        font-size: .25rem;
        line-height: .4rem;
        padding-right: .12rem;
        padding-bottom: .16rem
    }

    .sec-main .with .t-box {
        display: inline-block;
        line-height: .35rem
    }

    .sec-main .sec-tit {
        font-size: .9rem;
        line-height: 1.06rem;
        padding-bottom: 4.72rem
    }

    .sec-main .dc {
        color: var(--white);
        text-align: center;
        font-size: .25rem;
        line-height: .45rem;
        padding-bottom: 2.05rem;
    }

    .sec-main .dc br+strong {
        font-size: .29rem
    }
}


.sec01 {
    background: linear-gradient(180deg, #000 0%, #4b4b4b 100%);
    text-align: center
}

.sec01::before {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    pointer-events: none;
    bottom: 0;
    right: 0;
    background: url(images/noise.png) repeat center;
    mix-blend-mode: screen;
}

.sec01 .video-wrapper {
    border-radius: .16rem
}

.sec01 .video-wrapper::before {
    content: "";
    display: block;
    padding-top: 56.25%
}

.sec01 .video-wrapper .video-player {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%
}

.sec01 .ambassador {
    overflow: hidden
}

.sec01 .ambassador .top,
.sec01 .ambassador .btm {
    display: block;
    width: 100%;
    box-sizing: border-box;
    position: relative;
}

.sec01 .ambassador .quotes {
    color: var(--theme);
    font-weight: 300;
    letter-spacing: -.025em;
    position: relative;
}

.sec01 .ambassador .quotes::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    width: .48rem;
    height: .48rem;
    background: url(images/quote.png) no-repeat center / contain
}

.sec01 .ambassador .quotes strong {
    font-weight: 600
}

.sec01 .ambassador .quotes .by {
    color: var(--white);
    display: block
}

.sec01 .ambassador .quotes i {
    font-weight: 600
}

.sec01 .ambassador .top .visual {
    position: absolute;
    bottom: 0;
    transform: translateX(-50%);
}

.sec01 .ambassador .top .visual::before {
    content: "";
    display: block;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: url(images/txt-light.png) no-repeat center top / contain
}

.sec01 .ambassador .pic {
    box-sizing: border-box;
    border: .02rem solid var(--white);
    border-radius: .02rem;
    overflow: hidden;
    margin: 0 auto;
    position: relative
}

.sec01 .ambassador .profile {
    letter-spacing: -.025em;
    position: relative;
    text-align: left;
    color: var(--white);
}

.sec01 .ambassador .profile strong {
    font-weight: 600
}

.sec01 .ambassador .profile strong.theme {
    color: var(--theme);
    font-weight: 600
}

.sec01 .statistics .item {
    display: flex;
    color: var(--theme);
    align-items: center;
    border: .02rem solid var(--theme)
}

.sec01 .statistics .item>span,

.sec01 .statistics .item>strong {
    box-sizing: border-box;
    letter-spacing: -.05em
}

.sec01 .statistics .item span {
    flex: none;
    font-weight: 400
}

.sec01 .statistics .item span i {
    font-weight: 600
}

.sec01 .statistics .item strong {
    flex: 1;
    font-weight: 800
}

@media screen and (min-width:1001px) {
    .sec01 {
        padding-bottom: 1.75rem
    }

    .sec01 .container {
        width: 100%;
        max-width: 100%;
    }

    .sec01 .content.for-vid {
        width: 12.8rem;
        padding: 1.4rem 0 .25rem;
        margin: 0 auto
    }

    .sec01 .ambassador .quotes {
        font-size: .6rem;
        line-height: 1.05rem;
        padding-left: 1.4rem;
        text-align: left;
    }

    .sec01 .ambassador .quotes .by {
        font-size: .24rem;
        line-height: .48rem;
        margin-top: .48rem
    }

    .sec01 .ambassador .top {
        height: 8.2rem;
        display: flex;
        align-items: center;
        width: 19.2rem;
        margin: 0 auto;
    }

    .sec01 .ambassador .btm {
        height: 5.1rem;
        display: flex;
        align-items: end;
        width: 19.2rem;
        margin: 0 auto;
    }

    .sec01 .ambassador .col {
        flex: 1;
        position: relative;
    }

    .sec01 .ambassador.type-1 .btm,
    .sec01 .ambassador.type-2 .top {
        flex-direction: row-reverse;
    }

    .sec01 .ambassador .top .visual {
        width: 15.53rem
    }

    .sec01 .ambassador .top .visual::before {
        width: 23.68rem;
        height: 3.9rem;
    }

    .sec01 .ambassador.type-1 .visual {
        left: 58.3%
    }

    .sec01 .ambassador.type-2 .visual {
        left: 40%
    }

    .sec01 .ambassador .top .col+.col {
        height: 100%
    }

    .sec01 .ambassador .quotes::before {
        left: .7rem
    }

    .sec01 .ambassador.type-1 .quotes {
        left: .8rem
    }

    .sec01 .ambassador .pic {
        width: 7.12rem;
        left: .24rem;
    }

    .sec01 .ambassador.type-1 .btm .col+.col {
        width: 8.8rem;
        flex: none
    }

    .sec01 .ambassador .profile {
        font-size: .33rem;
        line-height: .75rem
    }

    .sec01 .ambassador.type-2 .profile {
        padding-bottom: 1.72rem;
        left: 2.2rem;
    }

    .sec01 .statistics {
        display: flex;
        align-items: stretch;
        gap: .2rem;
        height: 1.2rem;
        margin-top: .4rem;
        position: relative;
    }

    .sec01 .statistics .item {
        flex: 1
    }
    .sec01 .statistics .item span.half {
        flex: 1
    }

    .sec01 .statistics .item span {
        font-size: .22rem;
        line-height: .3rem;
        width: 1.9rem;
        padding-left: .12rem;
        text-align: left
    }


    .sec01 .statistics .item span.min {
        width:auto;
    }
    .sec01 .statistics .item strong {
        font-size: .52rem;
        line-height: .6rem;
        text-align: right;
        padding-right: .12rem
    }
}


@media screen and (max-width:1000px) {
    .sec01 {
        padding-bottom: 1.44rem
    }

    .sec01 .content.for-vid {
        width: 100%;
        padding: 1.4rem 0 .8rem;
        margin: 0 auto
    }


    .sec01 .ambassador .quotes {
        font-size: .51rem;
        line-height: .87rem;
        text-align: center;
        z-index: 1;
        padding-top: .8rem;
    }

    .sec01 .ambassador .quotes::before {
        left: 50%;
        top: 0;
        transform: translateX(-50%);
    }

    .sec01 .ambassador .quotes .by {
        font-size: .24rem;
        line-height: .48rem;
        margin-top: .48rem
    }

    .sec01 .ambassador .top {
        display: block;
        padding-top: .8rem;
    }

    .sec01 .ambassador .btm {
        display: block;
        padding: 0 .56rem
    }

    .sec01 .ambassador .top .col+.col {
        height: 5rem;
        position: relative;
        z-index: 0;
    }

    .sec01 .ambassador .top .visual {
        width: 11.6rem
    }

    .sec01 .ambassador .top .visual::before {
        width: 19.5rem;
        height: 3.2rem;
    }

    .sec01 .ambassador.type-1 .visual {
        left: 38.25%
    }

    .sec01 .ambassador.type-2 .visual {
        left: 65.875%
    }

    .sec01 .ambassador .pic {
        margin: 0 auto
    }

    .sec01 .ambassador .pic,
    .sec01 .ambassador .profile {
        width: 7.12rem;
        max-width: 100%;
    }

    .sec01 .ambassador .profile {
        margin: .55rem auto .8rem;
        font-size: .33rem;
        line-height: .69rem
    }


    .sec01 .statistics {
        width: 7.12rem;
        margin: 0 auto;
        max-width: 100%;
        padding-top: .15rem
    }

    .sec01 .statistics .item {
        height: 1.66rem;
        margin-top: .32rem
    }

    .sec01 .statistics .item span.half {
        flex: 1
    }

    .sec01 .statistics .item span {
        font-size: .28rem;
        line-height: .4rem;
        width: auto;
        padding-left: .2rem;
        text-align: left
    }

    .sec01 .statistics .item strong {
        padding-right: .32rem;
        text-align: right;
        font-size: .75rem;
        white-space: nowrap;
        line-height: .8rem
    }

}


.sec05 {
    background: url(images/sec05-bg.png) no-repeat center / cover
}

.sec05 .container {
    display: table;
}

.sec05 .container>div {
    display: table-cell;
    position: relative;
    vertical-align: middle;
    width: auto
}

.sec05 p {
    letter-spacing: -.04em;
    font-weight: 400
}

.sec05 p strong {
    font-weight: 600;
    margin-right: .2em
}

.sec05 p.bold {
    letter-spacing: -.08em;
    font-weight: 600
}

.sec05 p .t-box {
    color: var(--black);
    font-weight: 800
}

.sec05 p .t-box:before {
    background-color: var(--theme);
    left: -.15em;
    right: -.15em
}

@media screen and (min-width:1001px) {
    .sec05 .container {
        height: 12.6rem
    }

    .sec05 p {
        font-size: .69rem;
        line-height: 1.02rem
    }

    .sec05 p.bold {
        padding: .3rem 0 .75rem
    }
}

@media screen and (max-width:1000px) {
    .sec05 .container {
        height: 5.2rem
    }

    .sec05 p {
        padding-left: .56rem;
        font-size: .38rem;
        line-height: .57rem
    }

    .sec05 p.bold {
        padding: 0 0 .75rem .56rem;
    }
}



.sec04 {
    background: linear-gradient(180deg, #ffcc2a 2%, #ffffff 98%)
}

.sec04>div {
    width: 100%;
    height: auto
}

@media screen and (min-width:1001px) {

    .sec04 {
        height: 20.24rem
    }

    .sec04 .wide {
        position: absolute;
        width: 25.6rem;
        left: 50%;
        transform: translateX(-50%);
        top: 0;
    }
}


.sec02>div {
    width: 100%;
    height: auto;
    position: relative;
    overflow: hidden
}

@media screen and (min-width:1001px) {

    .sec02 .top {
        background: url(images/sec02-top-bg.png) no-repeat center / cover
    }

    .sec02 .top .wide {
        width: 15rem;
        margin: 0 auto
    }

    .sec02 .content {
        padding: 2.7rem 0 .2rem;
        background: url(images/sec02-bg.png) no-repeat center / cover
    }

    .sec02 .content .wide {
        width: 19.2rem;
        margin: 0 auto;
    }
}


.sec03 .content {
    width: 100%;
    height: auto;
    position: relative;
    overflow: hidden
}


@media screen and (min-width:1001px) {

    .sec03 .content {
        padding: 2rem 0;
        background: url(images/sec03-bg.png) no-repeat center / cover
    }

    .sec03 .content .wide {
        width: 19.2rem;
        margin: 0 auto;
    }
}