@charset "utf-8";

/*
========================================================================
common
========================================================================
*/

/*--- reset ---*/

img {
    vertical-align: top;
    max-width: 100%;
    height: auto;
}

/*--- helper ---*/

.inline-block {
    display: inline-block !important;
}

.hidden {
    display: none !important;
}

@media (max-width: 767.98px) {

    .hidden--sp {
        display: none !important;
    }

}

.link {
    color: #efefef;
}

/*--- component ---*/

.button {
    text-decoration: none;
    font-weight: 700;
    font-size: 14px;
    line-height: 24px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: rgba(0, 0, 0, 0.56);
    background: #fff;
    padding: .2em 1em;
    border-radius: 10em;
    min-width: 204px;
    min-height: 44px;
    box-sizing: border-box;
    transition: background-color .11s cubic-bezier(.5,.5,.5,1);
}

.button:hover {
    background-color: rgba(255, 255, 255, 0.94);
}

.button--black {
    background: rgba(0, 0, 0, 0.84);
    background: #000;
    color: #fff;
    transition: background-color .11s cubic-bezier(.5,.5,.5,1);
}

.button--black:hover {
    background: #1a1a1a;
}

.thanks__share-button {
    font-size: 16px;
    line-height: 24px;
    width: 288px;
    max-width: 100%;
    min-height: 52px;
}

.button--page-back {
    font-size: 16px;
    line-height: 24px;
    min-width: 152px;
    min-height: 52px;
}

@media (max-width: 767.98px) {

    .thanks__share-button {
        width: 100%;
    }

    .button--page-back {
        width: 100%;
    }

}

/*--- animation ---*/

.anime {
    opacity: 0;
    transform: translate(0px, 80px);
    transition: transform .4s cubic-bezier(0, 0.55, 0.45, 1),  opacity .4s cubic-bezier(0, 0.55, 0.45, 1);
}

.inview.anime {
    opacity: 1;
    transform: translate(0px, 0px);
}

/*
========================================================================
base
========================================================================
*/

body {
    color: rgba(0, 0, 0, 0.84);
    font-family: "Hiragino Sans","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 24px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* layout */
    display: flex;
    /* min-height: 100vh;
    min-height: calc(var(--vh, 1vh) * 100); */
}

body.thanks-page {
    min-height: 100vh;
    min-height: calc(var(--vh, 1vh) * 100);
}

body.menu-opened {
    overflow: hidden;
}

.header {
    flex: none;
    width: 80px;
}

.main {
    flex: 1;
    overflow-x: hidden;
}

.main--thanks {
    display: flex;
}

.inner {
    max-width: 980px;
    margin: 0 auto;
    box-sizing: content-box;
    padding: 0 56px;
}

@media (max-width: 767.98px) {

    body {
        font-size: 14px;
        line-height: 22px;
        display: block;
    }

    .header {
        background: transparent;
        color: inherit;
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
    }

    .inner {
        padding: 0 calc( 16 / 375 * 100vw );
    }

}

/*-------------------- section --------------------*/

.section {
    padding: 96px 0;
}

.section--concept {
    background: #21BDDB;
}

.section--timetable {
    position: relative;
    background: #7983F2;
}

.section--timetable::before {
    content: '';
    display: block;
    width: 930px;
    height: 570px;
    background: url(../images/timetable-bg.svg) center/contain no-repeat;
    position: absolute;
    top: 4px;
    left: 50%;
    transform: translate(-24.5%, 0px);
}

.section--session {
    padding-top: 120px;
    padding-bottom: 0;
    position: relative;
}

.section--awards {
    padding: 0;
}

.section--join {
    background: #618FEB;
    padding-bottom: 0;
}

.sectioin__header {
    margin: 0 0 32px;
}

.section__heading {
    font-family: Cinzel;
    font-weight: 700;
    font-size: 36px;
    line-height: 44px;
    text-transform: uppercase;
    margin: 0;
}

.section__heading-wrapper--session--sp {
    display: none;
}

.section__heading-wrapper--session {
    margin: 0 0 8px;
    position: relative;
    z-index: 1;
}

@media (max-width: 1171.98px) {

    /* .section--timetable::before {
        width: calc( 930 / 1172 * 100vw );
        height: calc( 570 / 1172 * 100vw );
    } */

}

@media (max-width: 767.98px) {

    .section--timetable::before {
        top: auto;
        left: auto;
        transform: none;
        width: calc( 330 / 375 * 100vw );
        height: calc( 220 / 375 * 100vw );
        bottom: 8px;
        right: calc( -23 / 375 * 100vw );
    }

    .section--session {
        padding-top: 96px;
    }

    .section__heading--concept {
        font-size: 24px;
        line-height: 32px;
    }

    .section__heading--timetable {
        font-size: 24px;
        line-height: 32px;
    }

    .section__heading--session {
        font-size: 24px;
        line-height: 32px;
    }

    .section__heading--join {
        font-size: 36px;
        line-height: 44px;
    }

    .section__heading-wrapper--session--sp {
        display: block;
    }

    .section__heading--join {
        text-align: center;
    }

}

/*
========================================================================
header
========================================================================
*/

.header {
    background: #292929;
    color: #fff;
    position: relative;
    z-index: 1000;
}

.header__inner {
    position: fixed;
    top: 0;
    left: 0;
    width: 80px;
    min-height: 100vh; /* Fallback */
    min-height: calc(var(--vh, 1vh) * 100);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.header__logo {
    margin: 30px auto 0;
    text-align: center;
}

.header__logo-link {
    transition: opacity .11s cubic-bezier(.5,.5,.5,1);
}

.header__logo-link:hover {
    opacity: .84;
}

.header__sp-button-wrapper {
    display: none;
}

.header__menu {
    flex: 1;
    display: flex;
    align-items: center;
}

.header__nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.header__nav-item {
    display: block;
    text-transform: uppercase;
    font-family: Cinzel;
    font-weight: 700;
    font-size: 14px;
    line-height: 24px;
    writing-mode: vertical-rl;
    -webkit-text-orientation: sideways;
    text-orientation: sideways;
}

.header__nav-link {
    display: block;
    text-decoration: none;
    color: inherit;
    padding: 16px;
    transition: opacity .11s cubic-bezier(.5,.5,.5,1);
}

.header__nav-link:hover {
    opacity: .84;
}

@media (max-width: 767.98px) {

    .header {
        color: inherit;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 2;
        background: transparent;
    }

    .header__inner {
        position: static;
        width: auto;
        min-height: 0;
        display: block;
    }

    .header__sp {
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: relative;
        z-index: 1;
    }

    .header__logo,
    .modal__heaader-logo {
        margin: 20px 18px;
    }

    .header__sp-button-wrapper {
        
    }

    .header__menu-button {
        appearance: none;
        border: none;
        background: transparent;
        box-shadow: none;
        display: block;
        box-sizing: content-box;
        width: 18px;
        height: 18px;
        padding: 20px;
        position: relative;
        cursor: pointer;
    }

    .header__menu-button-icon {
        pointer-events: none;
        position: absolute;
        width: 18px;
        height: 18px;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        background: transparent center/contain no-repeat;
        transition: opacity .2s ease-in-out;
    }

    .header__menu-button-icon--menu {
        background-image: url(../images/icon/menu.svg);
        background-size: 18px 12px;
        opacity: 1;
    }

    .header__menu-button-icon--close {
        background-image: url(../images/icon/close.svg);
        background-size: 14px 14px;
        opacity: 0;
    }

    .header__menu {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        height: calc(var(--vh, 1vh) * 100);
        /*display: none;*/
        background: #21BDDB;
        animation-fill-mode: forwards;
        animation-duration: 0.2s;
        animation-name: fade-out;
    }

    .header__nav {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
    }

    .header__nav-list {
        display: block;
    }

    .header__nav-item {
        writing-mode: inherit;
        font-size: 24px;
        line-height: 32px;
    }

    .header__nav-link {
        padding: 24px;
    }

    .menu-opened .header {
        color: inherit;
        position: fixed;
        height: 100vh;
        height: calc(var(--vh, 1vh) * 100);
    }

    .menu-opened .header__menu {
        animation-name: fade-in;
    }

    .menu-opened .header__menu-button-icon--menu {
        opacity: 0;
    }

    .menu-opened .header__menu-button-icon--close {
        opacity: 1;
    }
    
}

/*
========================================================================
hero
========================================================================
*/

.hero {
    background: #21BDDB url(../images/hero-bg.jpg) center top/cover no-repeat;
    height: 100vh; /* Fallback  */
    /* height: calc(var(--vh, 1vh) * 100); */
    display: flex;
    justify-content: center;
    text-align: center;
    position: relative;
    z-index: 1;
    overflow-y: visible;
}

.hero::before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent url(../images/hero-symbol.svg) 51.4% 53.2% no-repeat;
    mix-blend-mode: screen;
    opacity: .6;
}

.hero__content {
    position: relative;
    /* height: 100vh;
    max-height: 880px; */
    display: flex;
    flex-direction: column;
    overflow-y: visible;
}

.hero__heading {
    margin: 40px auto 0;
}

.hero__heading-img,
.thanks__heading-img {
    display: block;
    margin: 0 auto;
}

.hero__lead,
.thanks__lead {
    margin: 20px 0 0;
    font-weight: 700;
    font-size: 15px;
    line-height: 2.13;
    letter-spacing: 0.031em;
}

.hero__lead br,
.thanks__lead br {
    display: none;
}

.hero__date {
    display: block;
    font-family: Poppins;
    font-weight: 600;
    letter-spacing: .02em;
    margin: 24px 0 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.hero__date-day {
    display: block;
    font-size: 28px;
    line-height: 1.29;
}

.hero__date-time {
    margin: 0 0 0 12px;
    display: block;
    font-size: 16px;
    line-height: 1.2;
}

.hero__youtube {
    width: 155px;
    margin: 16px auto 0;
}

.hero__catch-container {
    margin: 72px 0 195px;
    /* margin: 72px 0 calc( 195 / 1030 * 100% ); */
    display: inline-flex;
    display: flex;
    justify-content: center;
    align-items: center;
}

.hero__catch {
    margin: 0;
    margin-top: -17px;
    margin-top: calc( -17 / 160 * 1em );
    font-family: Cinzel;
    font-weight: 700;
    font-size: 160px;
    line-height: 1;
    font-feature-settings: "palt";
}

.hero__catch > span {
    display: block;
    overflow: hidden;
}

.hero__catch > span:nth-child(2) {
    margin: -34px 0;
    margin: calc( -34 / 160 * 1em ) 0;
}

.hero__catch > span > span {
    display: inline-block;
}

.hero__catch > span:nth-child(1) > span:nth-child(1) {
    margin-right: calc( -4 / 160 * 1em );
}

.hero__catch > span:nth-child(1) > span:nth-child(2) {
    margin-right: calc( -2 / 160 * 1em );
}

.hero__catch > span:nth-child(1) > span:nth-child(4) {
    margin-right: calc( -5 / 160 * 1em );
}

.hero__catch > span:nth-child(1) > span:nth-child(8) {
    margin-right: calc( -3 / 160 * 1em );
}

.hero__catch > span:nth-child(2) > span:nth-child(1) {
    margin-right: calc( -1 / 160 * 1em );
}

.hero__catch > span:nth-child(2) > span:nth-child(2) {
    margin-right: calc( -2 / 160 * 1em );
}

.hero__catch > span:nth-child(2) > span:nth-child(3) {
    margin-right: calc( -2 / 160 * 1em );
}

.hero__catch > span:nth-child(2) > span:nth-child(5) {
    margin-right: calc( -4 / 160 * 1em );
}

.hero__catch > span:nth-child(3) > span:nth-child(3) {
    margin-right: calc( -2 / 160 * 1em );
}

.hero__catch > span:nth-child(3) > span:nth-child(4) {
    margin-right: calc( -17 / 160 * 1em );
}

.hero__catch > span:nth-child(3) > span:nth-child(6) {
    margin-right: calc( -2 / 160 * 1em );
}

.hero__catch > span:nth-child(3) > span:nth-child(7) {
    margin-right: calc( -5 / 160 * 1em );
}

.hero__catch > span:nth-child(3) > span:nth-child(8) {
    
}

.hero__catch-img {
    width: 1014px;
    height: auto;
}

.hero__catch-content {
    position: relative;
}

.hero__hand {
    position: absolute;
}

.hero__hand-img {
    display: block;
    width: 100%;
    height: auto;
}

.hero__hand--left {
    width: calc( 704 / 1023 * 100% );
    width: calc( 704 / 1014 * 100% );
    height: auto;
    top: 50%;
    right: 50%;
    margin: calc( 0 / 1014 * 100% ) calc( 12 / 1014 * 100% ) 0 0;
}

.hero__hand--right {
    width: calc( 760 / 1023 * 100% );
    width: calc( 760 / 1014 * 100% );
    height: auto;
    bottom: 50%;
    left: 50%;
    margin: 0 0 calc( 48 / 1014 * 100% ) calc( 107 / 1014 * 100% );
}

.fixed-entry__wrapper {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 1000;
}

.fixed-entry {
    background: #292929;
    border-radius: 0 0 0 40px;
    padding: 22px 20px;
}

.fixed-entry-button:not([href]) {
    pointer-events: none;
    cursor: default;
}

.fixed-entry.inited {
    transition: transform .3s cubic-bezier(.5,.5,.5,1);
}

/*--- animation ---*/

:root {
    --hero-delay-1: .2s;
    --hero-delay-2: calc( var(--hero-delay-1) + .5s );
    --hero-delay-3: calc( var(--hero-delay-1) + 1.5s );
    --hero-delay-4: calc( var(--hero-delay-1) + 2.4s );
}

.hero__heading-group {
    opacity: 0;
    transform: translate(0,8px);
    /* will-change: opacity, transform; */
}

.start .hero__heading-group {
    opacity: 1;
    transform: translate(0,0);
    transition: opacity .45s cubic-bezier(.5,.5,.5,1) var(--hero-delay-1), transform .45s cubic-bezier(.5,.5,.5,1) var(--hero-delay-1);
}

.hero__catch {
    opacity: 0;
    transform: translate(0,12px);
    /* will-change: opacity, transform; */
}

.start .hero__catch {
    opacity: 1;
    transform: translate(0,0);
    transition: opacity .45s cubic-bezier(.5,.5,.5,1) var(--hero-delay-2), transform .45s cubic-bezier(.5,.5,.5,1) var(--hero-delay-2);
}

.hero__hand {
    will-change: transform, opacity;
    opacity: 0;
}

.hero__hand--left {
    transform: translate(-3%,3%);
    transform: translate(-8%,8%);
}

.hero__hand--right {
    transform: translate(3%,-3%);
    transform: translate(8%,-8%);
}

.hero__hand {
    /* transition: transform .6s cubic-bezier(0.85, 0, 0.15, 1),  opacity .3s cubic-bezier(0.85, 0, 0.15, 1); */
}

.start .hero__hand {
    opacity: 1;
    transition: transform .24s cubic-bezier(0.9, 0, 0.13, 1) calc(.3s +  var(--hero-delay-3)),  opacity .3s cubic-bezier(0.5, 1, 0.89, 1)  var(--hero-delay-3);
}

.start .hero__hand--left {
    transform: translate(0%,0%);
}

.start .hero__hand--right {
    transform: translate(0%,0%);
}

.fixed-entry.slideup-by-join {
    transform: translate(0,-100%);
}

@media (min-width: 768px) {

    .fixed-entry__wrapper {
        transform: translate(0,-20%);
        opacity: 0;
    }
    
    .start .fixed-entry__wrapper {
        transition: transform .5s cubic-bezier(0.22, 1, 0.36, 1) var(--hero-delay-4), opacity .5s cubic-bezier(0.22, 1, 0.36, 1) var(--hero-delay-4);
        transform: translate(0%,0%);
        opacity: 1;
    }

}

@media (max-width: 767.98px) {

    .fixed-entry {
        border-radius: 0 0 0 36px;
        padding: 12px 16px;
    }

    .fixed-entry-button {
        font-size: 12px;
        line-height: 16px;
        min-width: 128px;
        min-height: 34px;
    }

    .fixed-entry.slideup-by-hero {
        transform: translate(0,-100%);
    }

}

/* height:880px以上の横長：メインコピーを大きくして、全体を垂直中央寄せ */
@media ( min-aspect-ratio: 1440/880 ) and ( min-height: 880.98px ) {

    .hero {
        align-items: center;
    }

    .hero__catch-container {
        flex: 1;
        margin: calc( 72 / 880 * 100vh ) 0 calc( 195 / 880 * 100vh );
    }

    .hero__catch {
        font-size: calc( 160 / 880 * 100vh );
    }

    .hero__catch-img {
        height: calc( 371 / 880 * 100vh );
        width: auto;
    }

}

/* height:880px以下の横長：全体を縮小 */
@media ( min-aspect-ratio: 1440/880 ) and ( max-height: 879.98px ) {

    .hero {
        align-items: flex-start;
    }

    .hero__heading {
        /* margin: calc( 40 / 880 * 100vh ) auto 0; */
    }

    .hero__heading-img {
        width: auto;
        height: calc( 64 / 880 * 100vh );
    }

    .hero__lead {
        margin: calc( 20 / 880 * 100vh ) 0 0;
        font-size: calc( 15 / 880 * 100vh );
    }

    .hero__date {
        margin: calc( 24 / 880 * 100vh ) 0 0;
    }

    .hero__date-day {
        font-size: calc( 28 / 880 * 100vh );
    }
    
    .hero__date-time {
        margin: 0 0 0 calc( 8 / 880 * 100vh );
        font-size: calc( 16 / 880 * 100vh );
    }

    .hero__catch-container {
        margin: calc( 72 / 880 * 100vh ) 0 calc( 195 / 880 * 100vh );
        margin: calc( 72 / 880 * 100vh ) 0 0;
    }

    .hero__catch {
        font-size: calc( 160 / 880 * 100vh );
    }

    .hero__catch-img {
        height: calc( 371 / 880 * 100vh );
        width: auto;
    }

}

/* スマホほどではない縦長：メインコピーを小さくして、全体を垂直中央寄せ */
@media ( max-aspect-ratio: 1439/880 ) and ( min-width: 768px ) {

    .hero {
        align-items: center;
    }

    .hero__catch-container {
        margin: 72px 0 calc( 168 / 1440 * 100vw );
    }

    .hero__catch {
        font-size: calc( 160 / 1440 * 100vw );
    }

    .hero__catch-img {
        width: calc( 1014 / 1440 * 100vw );
        height: auto;
    }

}

/* スマホ */
@media ( max-aspect-ratio: 1439/880 ) and (max-width: 767.98px) {

    .hero {
        align-items: flex-start;
        min-height: 700px;
        background-image: url(../images/hero-bg-sp.jpg);
        background-position: right bottom;
    }

    .hero::before {
        content: none;
    }

    .hero__heading {
        margin: 96px 0 0;
    }

    .hero__heading-img,
    .thanks__heading-img {
        width: 280px;
    }

    .hero__lead,
    .thanks__lead {
        margin: 16px 0 0;
        font-size: 16px;
        line-height: 24px;
        letter-spacing: 0.2px;
    }

    .hero__lead br,
    .thanks__lead br {
        display: inline;
    }

    .hero__date-day {
        margin: 0;
        font-size: 28px;
        line-height: 36px;
    }
    
    .hero__date-time {
        font-size: 16px;
        line-height: 32px;
        letter-spacing: 0;
    }

    .hero__youtube {
        margin: 16px auto 0;
    }

    .hero__catch-container {
        margin: 104px 0 0;
    }

    .hero__catch {
        font-size: min( 85px, calc( 54 / 375 * 100vw ) );
    }

    .hero__catch-img {
        width: calc( 343 / 375 * 100vw );
        height: auto;
    }

    .hero__hand--left {
        /* width: calc( 266 / 348 * 100% );
        margin: calc( -5 / 348 * 100% ) calc( -19 / 348 * 100% ) 0 0; */
        width: calc( 266 / 343 * 100% );
        margin: calc( 0 / 343 * 100% ) calc( -19 / 343 * 100% ) 0 0;
    }
    
    .hero__hand--right {
        /* width: calc( 286 / 348 * 100% );
        margin: 0 0 calc( 5 / 348 * 100% ) calc( 1 / 348 * 100% ); */
        width: calc( 286 / 343 * 100% );
        margin: 0 0 calc( 5 / 343 * 100% ) calc( 1 / 343 * 100% );
    }

}

@media ( max-aspect-ratio: 1439/880 ) and (max-width: 767.98px) and ( min-height: 1000px ) {

    .hero {
        align-items: center;
    }

    .hero__heading {
        margin: 0;
    }

    .hero__catch-container {
        margin: 104px 0 calc( 55 / 348 * 100% );
    }

}

/*
========================================================================
concept
========================================================================
*/

.concept {
    display: flex;
    justify-content: flex-end;
    position: relative;
}

.concept__question {
    position: absolute;
    top: 237px;
    right: 451px;
    width: calc( 560 / 980 * 100% );
    transform: translate(0,-50%);
}

.conctpt__content {
    width: 490px;
    max-width: 70%;
    box-sizing: border-box;
    padding-left: 20px;
}

.concept__catch {
    margin: 24px 0;
    font-weight: 700;
    font-size: 56px;
    line-height: 72px;
    /* z-indexを調整 */
    position: relative;
}

.concept__disc {
    margin: 0;
    font-weight: 600;
    font-size: 15px;
    line-height: 32px;
    letter-spacing: 0.46875px;
}

/*--- animation ---*/

.concept__question-img {
    display: block;
    opacity: 0;
    /* transform-origin: bottom right;
    transform: rotate(2deg) translate(4px, 4px); */
    
}

.section__heading--concept,
.concept__catch,
.concept__disc {
    opacity: 0;
    transform: translate(0px, 20px);
    /*transition: transform .3s cubic-bezier(0.5, 1, 0.89, 1),  opacity .2s cubic-bezier(0.5, 1, 0.89, 1);*/
    
}

.inview  .concept__question-img {
    opacity: 1;
    transition: opacity .6s cubic-bezier(0.5, 1, 0.89, 1);
}

.inview .section__heading--concept,
.inview .concept__catch,
.inview .concept__disc {
    opacity: 1;
    transform: translate(0px, 0px);
    transition: transform .4s cubic-bezier(0.25, 1, 0.5, 1),  opacity .4s cubic-bezier(0.25, 1, 0.5, 1);
}

.inview  .concept__question-img {
    transition-delay: .0s;
}

.inview .section__heading--concept {
    transition-delay: .4s;
}

.inview .concept__catch {
    transition-delay: .5s;
}

.inview .concept__disc {
    transition-delay: .7s;
}



@media (max-width: 991.98px) {

    .concept {
        display: block;
    }

    .concept__question {
        top: -106px;
        right: -93px;
        width: 265px;
        transform: none;
    }

    .conctpt__content {
        width: auto;
        max-width: none;
        padding-left: 0;
    }

    .concept__catch {
        max-width: 86%;
        margin: 16px 0;
        font-weight: 700;
        font-size: 42px;
        line-height: 56px;
    }

    .concept__catch br {
        display: none;
    }

}

@media (max-width: 575.98px) {

    .concept__catch {
        max-width: none;
    }

    .concept__catch br {
        display: inline;
    }

}

/*
========================================================================
timetable
========================================================================
*/

.timetable {
    /* z-index調整用 */
    position: relative;
}

.timetable__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.timetable__item {
    
    color: #fff;
}

.timetable__item-link {
    display: flex;
    flex-wrap: wrap;
    padding: 24px;
    background: #292929;
    transition: background-color .12s cubic-bezier(.5,.5,.5,1);
}

.timetable__item-link:hover {
    background-color: #2e2e2e;
    /* background-color: #2b2b2b; */
}

.timetable__item + .timetable__item {
    margin: 4px 0 0;
}

a.timetable__item-link {
    text-decoration: none;
    color: inherit;
}

.timetable__item-time, 
.timetable__item-label {
    font-family: Cinzel;
    font-weight: 700;
    font-size: 20px;
    line-height: 28px;
}

.timetable__item-time {
    display: block;
    margin: 0 16px 0 0;
}

.timetable__item-label {
    text-transform: uppercase;
    margin: 0;
    flex: 1;
}

.timetable__item-disc {
    font-size: 14px;
    line-height: 24px;
    margin: 4px 0 0;
    width: 100%;
    box-sizing: border-box;
    padding-left: 66px;
}

/*---  ---*/

.timetable__item {
    opacity: 0;
    transform: translate(0px, 30px);
    transition: transform .4s cubic-bezier(0, 0.55, 0.45, 1),  opacity .4s cubic-bezier(0, 0.55, 0.45, 1);
}

.timetable__item:nth-child(2) {
    transition-delay: .2s;
}

.timetable__item:nth-child(3) {
    transition-delay: .3s;
}

.timetable__item:nth-child(4) {
    transition-delay: .4s;
}

.timetable__item:nth-child(5) {
    transition-delay: .5s;
}

.timetable__item:nth-child(6) {
    transition-delay: .6s;
}

.inview .timetable__item {
    opacity: 1;
    transform: translate(0px, 0px);
}

@media (max-width: 767.98px) {

    .timetable__item-disc {
        font-weight: 500;
        font-size: 12px;
        line-height: 16px;
        margin: 8px 0 0;
        padding: 0;
    }

}

/*
========================================================================
session
========================================================================
*/

.session {
    padding: 60px 0;
    position: relative;
}

/* .section > .session:last-child {
    padding-bottom: 96px;
} */

.session-bg {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 100vw;
    background: transparent;
    background-color: #FDAE2C;
    /* will-change: background-color; */
}

.session-bg.inited{
    transition: background-color .3s cubic-bezier(.5,.5,.5,1);
}

.session-bg[data-bg="a"]{
    background-color: #FDAE2C;
}

.session-bg[data-bg="b"]{
    background-color: #F76EAB;
}

.session-bg[data-bg="c"]{
    background-color: #BE80ED;
}

.session-bg[data-bg="d"]{
    background-color: #F77B74;
}

.session--a {
    /* background: #FDAE2C; */
    padding-top: 0;
}

.session--b {
    /* background: #F76EAB; */
}

.session--c {
    /* background: #BE80ED; */
}

.session--d {
    /* background: #F77B74; */
}

.session::before {
    content: '';
    display: block;
    position: absolute;
    background: center/contain no-repeat;
}

.session--a::before {
    top: -72px;
    left: 50%;
    margin-left: calc( ( -1360px / 2 ) + 20px );
    width: 261px;
    height: 242px;
    background-image: url(../images/session-bg-a.svg);
}

.session--b::before {
    top: 27px;
    left: 50%;
    margin-left: calc( ( -1360px / 2 ) + 44px );
    width: 202px;
    height: 236px;
    background-image: url(../images/session-bg-b.svg);
}

.session--c::before {
    top: 29px;
    left: 50%;
    margin-left: calc( ( -1360px / 2 ) + 45px );
    width: 231px;
    height: 245px;
    background-image: url(../images/session-bg-c.svg);
}

.session--d::before {
    top: 27px;
    left: 50%;
    margin-left: calc( ( -1360px / 2 ) + 55px );
    width: 251px;
    height: 236px;
    background-image: url(../images/session-bg-d.svg);
}

.session__conetent {
    /* z-index調整用 */
    position: relative;
}

/* @media (max-width: 1439.98px) {

    .session::before {
        margin: 0;
    }

    .session--a::before {
        left: 20px;
    }
    
    .session--b::before {
        left: 44px;
    }
    
    .session--c::before {
        left: 45px;
    }
    
    .session--d::before {
        left: 55px;
    }

} */

@media (max-width: 1171.98px) {

    .session::before {
        margin: 0;
    }

    .session--a::before {
        top: -148px;
        left: -58px;
        width: 188px;
    }

    .session--b::before {
        top: -6px;
        left: -40px;
        width: 144px;
    }

    .session--c::before {
        top: -10px;
        left: -40px;
        width: 166px;
    }

    .session--d::before {
        top: -10px;
        left: -43px;
        width: 188px;
    }

}

@media (max-width: 767.98px) {

    .session {
        padding: 48px 0;
    }

    .session--a {
        padding-top: 0;
    }

    .session:last-child {
        padding-bottom: 96px;
    }

    .session--a::before {
        top: -148px;
        left: -58px;
        width: 188px;
    }

    .session--b::before {
        top: -6px;
        left: -40px;
        width: 144px;
    }

    .session--c::before {
        top: -10px;
        left: -40px;
        width: 166px;
    }

    .session--d::before {
        top: -10px;
        left: -43px;
        width: 188px;
    }

}

/*-------------------- top --------------------*/

.session__info {
    border-top: 2px solid rgba(0, 0, 0, 0.84);
    padding: 8px 0 0;
    margin: 0 0 32px;
    display: flex;
}

.session__time,
.session__label {
    display: block;
    font-family: Cinzel;
    font-weight: 700;
    font-size: 16px;
    line-height: 24px;
    color: rgba(0, 0, 0, 0.84);
}

.session__time {
    margin: 0 8px 0 0;
}

.session__label {
    margin: 0;
    flex: 1;
}

.session__top {
    display: flex;
    color: #292929;
}

.session__heading {
    font-weight: 700;
    /* font-size: 48px;
    line-height: 1.17; */
    font-size: 40px;
    line-height: 1.4;
    width: calc(446 / 980 * 100%);
    margin: 0 calc(92 / 980 * 100%) 0 0;
}

.session__heading span {
    display: inline-block;
}

.session__disc {
    margin: 0;
    flex: 1;
    font-weight: 500;
    font-size: 14px;
    line-height: 24px;
}

.comingsoon__wrapper {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin: -32px 0 -96px;
}

.comingsoon {
    margin: calc( 230 / 146 * 1em ) 0;
    font-family: Cinzel;
    font-weight: bold;
    font-size: 146px;
    font-size: min( 146px, calc( 146 / 1440 * 100vw ));
    line-height: .92;
}

@media (max-width: 1171.98px) {

    .session__heading {
        font-size: calc( 39 / 1172 * 100vw );
    }

}

@media (max-width: 991.98px) {

    .session__top {
        display: block;
    }

    .session__info {
        margin: 0 0 48px;
    }

    .session__heading {
        font-weight: 700;
        font-size: 32px;
        line-height: 1.37;
        width: auto;
        margin: 0 0 24px;
    }

    .comingsoon__wrapper {
        margin: -48px 0 -96px;
    }

}

@media (max-width: 767.98px) {

    .session__info {
        margin: 0 0 48px;
    }

    .session__heading {
        font-weight: 700;
        font-size: 32px;
        line-height: 1.37;
        width: auto;
        margin: 0 0 24px;
    }

    .session__disc {
        margin: 0;
        flex: 1;
        font-size: 14px;
        line-height: 22px;
    }

}

/*-------------------- speaker --------------------*/

.speakers {
    display: flex;
    flex-wrap: wrap;
    /* margin: 64px 0 0 0; */
    margin: 56px 0 0 0;
}

.speaker {
    width: calc( (100% - 40px) /2 );
    box-sizing: border-box;
    position: relative;
    display: flex;
    flex-direction: column;
}

/* .speaker__innerのmarginの相殺防止 */
.speaker::after {
    content: '';
    display: table;
}

.speaker + .speaker {
    margin-left: 40px;
}

.speaker::before {
    text-transform: uppercase;
    display: block;
    font-family: Cinzel;
    font-weight: 700;
    font-size: 20px;
    line-height: 28px;
    margin: 0 0 -8px;
}

.speaker.guest::before {
    content: 'Guest';
}

.speaker.moderator::before {
    content: 'Moderator';
}

.speaker__inner {
    flex: 1;
    margin: 0 10px 10px 0;
    padding: 32px 0 0 24px;
    display: flex;
    flex-direction: column;
    min-height: 400px;
    box-sizing: border-box;
    background: rgba(0, 0, 0, 0.84);
    /* background: #F76EAB url(../images/名称未設定フォルダ/wantedlyinc.com/ja/Rectangle\ 47.png) left top no-repeat; */
    border-top-right-radius: 69% 80%;
    border-top-right-radius: 320px;
    color: #fff;
}

.speaker__name {
    margin: 0 0 8px;
    font-family: Cinzel;
    font-weight: 700;
    font-size: 36px;
    line-height: 1.23;
}

.speaker__job {
    margin: 0;
    font-weight: 700;
    font-size: 14px;
    line-height: 24px;
}

.speaker__summary {
    margin: 16px 186px 0 0;
    font-weight: 500;
    font-size: 12px;
    line-height: 16px;
}

.speaker__logo {
    padding: 24px 0 0;
    min-height: 120px;
}

.speaker__logo::before {
    content: '';
    display: block;
    width: 32px;
    height: 2px;
    background: #fff;
    margin: 0 0 32px;
}

.speaker__photo {
    margin: 0;
    position: absolute;
    right: 0;
    bottom: 0;
    width: 266px;
    max-width: calc( 266 / 460 * 100% );
}

.speaker__photo-img {
    display: block;
}

.speaker__logo-img--wantedly {
    transform: translate(-8px, -8px);
}

@media (max-width: 1171.98px) {

    .speaker + .speaker {
        margin-left: calc( 40 / 980 * 100% );
    }

    .speaker__inner {
        padding: 32px 0 0 calc( 24 / 1172 * 100vw );
        border-top-right-radius: calc( 320 / 1172 * 100vw );
        
    }

    .speaker__name {
        font-size: calc( 36 / 1172 * 100vw );
    }

    .speaker__summary {
        margin-right: calc( 186 / 1172 * 100vw );
    }

    .speaker__photo {
        width: calc( 195 / 1172 * 100vw );
    }

}

@media (max-width: 991.98px) {

    .speaker__inner {
        border-top-right-radius: calc( 240 / 992 * 100vw );
        min-height: 350px;
    }

}

@media (max-width: 767.98px) {

    .speakers {
        display: block;
        margin: 48px 0 0 calc( -16 / 375 * 100vw );
    }
    
    .speaker {
        width: auto;
        margin-left: 0;
    }

    .speaker + .speaker {
        margin: 32px 0 0;
    }

    .speaker::before {
        font-size: 20px;
        line-height: 28px;
        margin: 0 0 -8px calc( 16 / 375 * 100vw );
    }

    .speaker__inner {
        padding: 32px 0 0 calc( 16 / 375 * 100vw );
        min-height: 328px;
        border-top-right-radius: 242px;
    }

    .speaker__name {
        margin: 0 0 4px;
        font-size: 28px;
        line-height: 38px;
    }

    .speaker__job {
        margin: 0;
        font-weight: 500;
        font-size: 14px;
        line-height: 22px;
    }

    .speaker__summary {
        margin-right: calc( 72 / 375 * 100vw );
    }

    .speaker__logo {
        margin: 0;
        padding: 32px 0 0;
        min-height: 104px;
    }

    .speaker__logo-img {
        transform: translate(0, -8px);
    }

    .speaker__photo {
        width: 180px;
    }

}

/*
========================================================================
awards
========================================================================
*/

/*-------------------- hero --------------------*/

.awards__hero {
    background: #000 url(../images/awards-bg.jpg) center/cover no-repeat;
    color: #21BDDB;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    width: 100%;
    min-height: 800px;
    /* height: 100vh;
    height: calc(var(--vh, 1vh) * 100); */
}

.awards__heading {
    margin: 0 0 48px;
    font-family: Cinzel;
    font-weight: 700;
    font-size: 80px;
    line-height: 1.2;
}

.awards__disc {
    max-width: 608px;
    margin: 0 auto;
    font-weight: 700;
    font-size: 18px;
    line-height: 28px;
    letter-spacing: 0.46875px;
}

/*--- animation ---*/

.awards__hero {
    /* background-attachment: fixed; */
}

.awards__heading,
.awards__disc {
    opacity: 0;
    transform: translate(0px, 30px);
    transition: transform .4s cubic-bezier(0, 0.55, 0.45, 1),  opacity .4s cubic-bezier(0, 0.55, 0.45, 1);
}

.inview .awards__heading,
.inview .awards__disc {
    opacity: 1;
    transform: translate(0px, 0px);
}

.inview .awards__heading {
    transition-delay: .2s;
}
.inview .awards__disc {
    transition-delay: .35s;
}

@media (max-width: 767.98px) {

    .awards__hero {
        min-height: 616px;
    }

    .awards__heading {
        font-size: calc( 42 / 375 * 100vw );
        line-height: 1.33;
        margin: 0 0 32px;
    }

    .awards__disc {
        text-align: left;
        font-size: 15px;
        line-height: 32px;
        letter-spacing: 0.4px;
    }

}

/*-------------------- content --------------------*/

.awards__body {
    background: #21BDDB;
    color: inherit;
    padding: 96px 0;
    width: 100%;
    position: relative;
    overflow-x: hidden;
    overflow-y: hidden;
}

.awards__body::before,
.awards__body::after {
    content: '';
    display: block;
    width: 1000px;
    height: 919px;
    position: absolute;
    background: center/contain no-repeat;
}

.awards__body::before {
    top: -459px;
    left: 50%;
    margin-left: calc( (-1360px / 2) + -500px );
    background-image: url(../images/awards-bg-01.svg);
}

.awards__body::after {
    bottom: -459px;
    right: 50%;
    margin-right: calc( (-1360px / 2) + -497px );
    background-image: url(../images/awards-bg-02.svg);
}

.awards__content {
    position: relative;
    z-index: 1;
}

.awards__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
}

.awards__item {
    flex: 1;
    text-align: center;
}

.awards__item--rookie {
    order: 1;
}

.awards__item--best {
    order: 2;
}

.awards__item--local {
    order: 3;
}

.awards__item--best {
    margin: 0 56px;
}

.awards__item-logo-container {
    min-height: 140px;
    margin: 0 0 16px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.awards__item-logo {
    width: 120px;
    height: 120px;
    border-radius: 100%;
    background: rgba(0, 0, 0, 0.84);
    display: flex;
    justify-content: center;
    align-items: center;
}

.awards__item-logo--best {
    width: 140px;
    height: 140px;
}

.awards__item-logo-img {
    display: block;
}

.awards__item-logo-img--best {
    transform: translate(-1.5%,0);
}

.awards__item-logo-img--rookie {
    transform: translate(.5%,0);
}

.awards__item-logo-img--local {
    transform: translate(.5%,0);
}

.awards__item-title {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin: 0 0 8px;
    font-family: Cinzel;
    font-weight: 700;
    font-size: 20px;
    line-height: 28px;
}

.awards__item-disc {
    margin: 0;
    text-align: left;
    font-weight: 500;
    font-size: 12px;
    line-height: 16px;
}

/*--- animation ---*/

/* .awards__list,
.nomination {
    opacity: 0;
    transform: translate(0px, 30px);
    transition: transform .4s cubic-bezier(0, 0.55, 0.45, 1),  opacity .4s cubic-bezier(0, 0.55, 0.45, 1);
}

.inview .awards__list,
.inview .nomination {
    opacity: 1;
    transform: translate(0px, 0px);
}

.inview .awards__list {
    transition-delay: .2s;
}
.inview .nomination {
    transition-delay: .35s;
} */

@media (max-width: 1439.98px) {

    .awards__body::before {
        left: -500px;
        margin-left: 0;
    }
    
    .awards__body::after {
        right: -497px;
        margin-right: 0;
    }

}

@media (max-width: 1171.98px) {

    .awards__item--best {
        margin: 0 calc( 56 / 1172 * 100vw );
    }

    /* .awards__item-title {
        line-height: 24px;
    } */

}

@media (max-width: 767.98px) {

    .awards__body::before {
        top: -459px;
        left: -500px;
        margin-left: auto;
    }
    
    .awards__body::after {
        bottom: -459px;
        right: -499px;
        margin-right: auto;
    }

    .awards__list {
        display: block;
    }

    .awards__item--best {
        margin: 0;
    }

    .awards__item + .awards__item {
        margin: 38px 0 0;
    }

    .awards__item-title {
        height: auto;
    }

}

/*-------------------- nomination --------------------*/

.nomination {
    margin: 64px 0 0;
    background: rgba(0, 0, 0, 0.84);
    border-radius: 600px;
    padding: 24px 64px;
    min-height: 136px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
}

.nomination__inner {
    flex: 1;
    display: flex;
    align-items: flex-start;
    max-width: 788px;
    margin: 0 auto;
}

.nomination__logo {
    flex: none;
    margin-right: 32px;
}

.nomination__content {
    max-width: 360px;
    margin-right: 32px;
}

.nomination__heading {
    margin: 0 0 8px;
    font-weight: 800;
    font-size: 18px;
    line-height: 28px;
    letter-spacing: 0.18px;
    color: #fff;
}

.nomination__disc {
    margin: 0;
    font-weight: 500;
    font-size: 12px;
    line-height: 16px;
    color: rgba(255, 255, 255, 0.5);
}

.nomination__button {
    align-self: center;
    flex: none;
    display: block;
    margin-left: auto;
    text-decoration: none;
    font-weight: 700;
    font-size: 16px;
    line-height: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: rgba(0, 0, 0, 0.56);
    background: #fff;
    padding: 14px 30px;
    border-radius: 10em;
    max-width: 304px;
    cursor: pointer;
}

@media (max-width: 991.98px) {

    .nomination {
        padding: 32px 0;
    }

    .nomination__inner {
        align-items: center;
        flex-direction: column;
        text-align: center;
    }

    .nomination__logo {
        margin: 0 0 32px;
    }

    .nomination__content {
        margin: 0 auto;
    }

    .nomination__disc {
        margin: 0;
    }

    .nomination__button {
        margin: 32px auto 0;
    }

}

@media (max-width: 767.98px) {

    .nomination {
        margin: 48px 0 0;
        display: block;
        border-radius: 60px;
        padding: 64px calc( 16 / 375 * 100vw );
        text-align: center;
    }

    .nomination__inner {
        display: block;
        max-width: 520px;
    }

    .nomination__logo {
        margin: 0 0 32px;
    }

    .nomination__content {
        margin: 0;
        max-width: none;
    }

    .nomination__disc {
        margin: 0;
        text-align: left;
    }

    .nomination__button {
        margin: 32px auto 0;
    }

}

/*
========================================================================
join
========================================================================
*/

.join {
    display: flex;
    margin: 12px 0 0;
}

.join__col {
    flex: 1;
    padding-bottom: 8px;
}

.join__col:nth-child(odd) {
    border-right: 1px solid rgba(0, 0, 0, 0.56);
}

.join__col:nth-child(even) {
    border-left: 1px solid rgba(0, 0, 0, 0.56);
}

.join-bg {
    overflow: hidden;
}

.join-bg__inner {
    max-width: 1360px;
    margin: 0 auto;
    position: relative;
}

.join-bg__inner::before {
    content: '';
    display: block;
    padding: calc( 376 / 1360 * 100% ) 0 0;
    padding: calc( 108px + ( 278 / 1360 * 100% )) 0 0;
}

.join-bg__img {
    position: absolute;
    left: 50%;
    bottom: 0;
    max-width: 105.6%;
    transform: translate(-50%,4%);
    transform-origin: center;
}

/*--- animation ---*/

/* .join {
    opacity: 0;
    transform: translate(0px, 30px);
    transition: transform .4s cubic-bezier(0, 0.55, 0.45, 1),  opacity .4s cubic-bezier(0, 0.55, 0.45, 1);
}

.inview.join {
    opacity: 1;
    transform: translate(0px, 0px);
}

.inview.join {
    transition-delay: .2s;
} */

@media (max-width: 767.98px) {

    .join {
        display: block;
        margin: 32px 0 0;
    }

    .join__col {
        padding-bottom: 0;
    }

    .join__col:nth-child(odd),
    .join__col:nth-child(even) {
        border-left: none;
        border-right: none;
    }

    .join__col + .join__col {
        margin: 56px 0 0;
        padding: 0;
        border-top: 2px solid rgba(0, 0, 0, 0.56);
    }

    .join-bg__inner::before {
        padding: calc( 136 / 375 * 100% ) 0 0;
    }

    .join-bg__img {
        max-width: 100%;
    }

}

/*-------------------- form --------------------*/

.join-form {
    padding-right: 40px;
    
}

.join-form__disc {
    margin: 20px 0 0;
    font-size: 12px;
    line-height: 1.33;
    color: rgba(0, 0, 0, 0.56);
}

.join-form__label {
    display: block;
    margin: 16px 0 6px 12px;
    font-weight: 600;
    font-size: 14px;
    line-height: 24px;
    color: rgba(0, 0, 0, 0.74);
}

.join-form__input {
    display: block;
    box-sizing: border-box;
    width: 100%;
    border: none;
    box-shadow: none;
    padding: 6px 12px;
    background: rgba(0, 0, 0, 0.74);
    border-radius: 4px;
    font-size: 14px;
    line-height: 24px;
    color: #fff;
}

.join-form__error {
    display: none !important;
    margin: 6px 0 0 12px;
    font-size: 12px;
    line-height: 16px;
    color: rgb(237, 71, 47);
}

.join-form *:required[aria-invalid="true"] + .join-form__error, 
.join-form .invalid + .join-form__error {
    display: block !important;
}

.checkbox {
    display: block;
    position: relative;
    cursor: pointer;
    margin-left: 12px;
}

.checkbox__input {
    position: absolute;
    right: 100%;
    bottom: 100%;
    z-index: -1;
    opacity: 0;
    pointer-events: none;
}

.checkbox__content {
    display: flex;
    align-items: center;
}

.checkbox__content::before {
    content: '';
    display: block;
    width: 20px;
    height: 20px;
    border: 1.5px solid rgba(0, 0, 0, 0.56);
    box-sizing: border-box;
    border-radius: 100%;
    flex: none;
    margin-right: 20px;
}

.checkbox__input:focus + .checkbox__content::before {
    outline: 5px auto Highlight;
	outline: 5px auto -webkit-focus-ring-color;
}

.checkbox__input:checked + .checkbox__content::before {
    background: rgba(0, 0, 0, 0.84) url(../images/icon/check.svg) center/60% no-repeat;
    border: none;
}

.checkbox__label {
    font-size: 12px;
    line-height: 16px;
    min-height: 20px;
    align-items: center;
    flex: 1;
}

.join-form__item--privacy {
    margin: 30px 0 0;
}

.join-form__button {
    margin: 32px 0 0;
    -webkit-appearance: none;
    appearance: none;
    border: none;
    box-shadow: none;
    min-width: 288px;
    min-height: 52px;
    display: flex;
    vertical-align: top;
    box-sizing: border-box;
    padding: .2em .8em;
    justify-content: center;
    align-items: center;
    text-align: center;
    background: rgba(0, 0, 0, 0.84);
    color: #fff;
    border-radius: 10em;
    font-size: 16px;
    line-height: 24px;
    cursor: pointer;
    transition: background-color .11s cubic-bezier(.5,.5,.5,1);
}

.join-form__button:hover {
    background: rgba(0, 0, 0, 0.76);
}

.join-form__button[disabled] {
    pointer-events: none;
    cursor: default;
    background: #a7a7a7;
    color: #f1f1f1;
}

@media (max-width: 767.98px) {

    .join-form {
        padding-right: 0;
    }

    .join-form__disc {
        margin: 0;
        display: flex;
        justify-content: center;
    }

    .join-form__input {
        font-size: 16px;
    }

    .join-form__item--privacy {
        margin: 24px 0 0;
    }

    .join-form__button {
        margin: 48px auto 0;
    }

}

/*-------------------- gift --------------------*/

.special-gift {
    padding-left: 20px;
}

.special-gift__content {
    padding: 0 0 0 20px;
}

.special-gift__photo {
    margin: 40px 0 0 20px;
    background: #F4F4F4;
}

.special-gift__photo-img {
    display: block;
    width: 300px;
    margin: 0 auto;
}

.special-gift__heading {
    margin: 0;
    font-weight: bold;
    font-size: 32px;
    line-height: 44px;
    letter-spacing: 0.564706px;
}

.special-gift__lead {
    margin: 16px 0 0;
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0.2px;
}

.special-gift__list,
.thanks__gift-list {
    margin: 0;
    font-weight: 500;
    font-size: 12px;
    line-height: 16px;
}

.special-gift__list {
    margin: 16px 0 0;
}

.special-gift__item,
.thanks__gift-item {
    margin-left: 1em;
    text-indent: -1em;
}

.special-gift__item::before,
.thanks__gift-item::before {
    content: '・';
}

@media (max-width: 767.98px) {

    .special-gift {
        padding-left: 0;
        display: flex;
        flex-direction: column-reverse;
    }

    .special-gift__content {
        padding: 0;
    }

    .special-gift__photo {
        width: auto;
        margin: 24px 0;
        text-align: center;
    }

    .special-gift__photo-inner {
        display: block;
    }

    .special-gift__photo-img {
        width: 244px;
    }

    .special-gift__list {
        margin: 24px 0 0;
    }

}

/*
========================================================================
thanks
========================================================================
*/

.thanks {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #21BDDB;
    position: relative;
    overflow: hidden;
}

.thanks::before {
    content: '';
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 1678px;
    height: 1541px;
    background: transparent url(../images/hero-symbol.svg) center/cover no-repeat;
    mix-blend-mode: screen;
    opacity: .6;
}

.thanks__content {
    max-width: 100%;
    min-height: 880px;
    box-sizing: border-box;
    padding: 40px 0;
    text-align: center;
    /* z-index調整用 */
    position: relative;
}

.thanks__heading {
    margin: 0 auto;
}

.thanks__catch-content {
    margin: 80px auto 0;
}

.thanks__catch {
    margin: 0 0 -2px;
}

.thanks__gift {
    width: 920px;
    max-width: 100%;
    margin: 0 auto;
    border-radius: 1000px;
    background: #292929;
    color: #fff;
    display: flex;
    overflow: hidden;
}

.thanks__gift-photo {
    width: 300px;
    max-width: 40%;
    flex: none;
    display: flex;
    align-items: center;
    background: #F4F4F4;
}

.thanks__gift-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    position: relative;
    left: 10px;
}

.thanks__gift-content {
    padding: 64px 96px 64px 40px;
    text-align: left;
}

.thanks__gift-content-inner {
    max-width: 504px;
}

.thanks__gift-heading {
    margin: 0;
    font-weight: 800;
    font-size: 32px;
    line-height: 44px;
    letter-spacing: 0.564706px;
}

.thanks__gift-lead {
    margin: 16px 0 0;
    font-weight: 600;
    font-size: 15px;
    line-height: 24px;
    letter-spacing: 0.46875px;
}

.thanks__gift-list {
    margin: 16px 0 0;
}

.thanks__share-button {
    margin: 40px 0 0;
}

.button--page-back {
    margin: 40px 0 0;
}

/*--- anime ---*/

.anime-thanks {
    opacity: 0;
    transform: translate(0px, 20px);
}

.start .anime-thanks {
    opacity: 1;
    transform: translate(0px, 0px);
    transition: transform .4s cubic-bezier(0, 0.55, 0.45, 1),  opacity .4s cubic-bezier(0, 0.55, 0.45, 1);
}

.start .anime-thanks--1 {
    transition-delay: .1s;
}

.start .anime-thanks--2 {
    transition-delay: .35s;
}

.start .anime-thanks--3 {
    transition-delay: .62s;
}

@media (max-width: 991.98px) {
/* @media (max-width: 767.98px) { */

    .thanks {
        width: 100%;
        display: block;
    }

    .thanks::before {
        content: none;
    }

    .thanks__content {
        min-height: 0;
        padding: 96px 0 72px;
    }

    .thanks__catch-content {
        margin: 40px 0 0;
    }

    .thanks__gift {
        display: block;
        border-radius: 60px;
    }
    
    .thanks__gift-photo {
        width: auto;
        max-width: none;
        position: relative;
        overflow: hidden;
        min-height: 170px;
    }

    .thanks__gift-photo::before {
        content: '';
        display: block;
        padding: 30% 0 0;
    }

    .thanks__gift-img {
        position: absolute;
        top: 0;
        left: 0;
    }

    .thanks__gift-content {
        padding: calc(16 / 375 * 100vw) calc(16 / 375 * 100vw) 40px;
    }

    .thanks__gift-content-inner {
        max-width: none;
    }

    .thanks__gift-heading {
        font-weight: 700;
    }
    
    .thanks__gift-lead {
        margin: 16px 0 0;
        font-weight: 600;
    }

    .thanks__share-button-container {
        text-align: center;
    }

    .thanks__share-button {
        margin: min(48px, calc(24 / 375 * 100vw)) 0 0;
    }

    .button--page-back {
        margin: 48px 0 0;
    }

}

/*
========================================================================
modal
========================================================================
*/

.modal__container {
    position: relative;
    max-height: calc(var(--vh, 1vh) * 100);
}

.modal__heaader {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    width: 100%;
    display: block;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.modal__heaader-logo {
    display: none;
}

.modal__close {
    appearance: none;
    border: none;
    background: transparent;
    box-shadow: none;
    display: block;
    box-sizing: content-box;
    width: 18px;
    height: 18px;
    padding: 40px;
    position: relative;
    cursor: pointer;
    transition: opacity .11s cubic-bezier(.5,.5,.5,1);
}

.modal__close:hover {
    opacity: .68;
}

.modal__close-icon {
    pointer-events: none;
    position: absolute;
    width: 18px;
    height: 18px;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    background: transparent center/contain no-repeat;
    transition: opacity .2s ease-in-out;
}

.modal__close-icon {
    background-image: url(../images/icon/close.svg);
    background-size: 14px 14px;
}

.nominate {
    width: 100vw;
    min-height: 100vh;
    min-height: calc(var(--vh, 1vh) * 100);
    background: #21BDDB;
    box-sizing: border-box;
    padding: 0 0 80px;
}

.nominate__header {
    /* position: sticky;
    top: 0;
    left: 0;
    width: 100%; */
    background: #21BDDB;
    padding: 80px 0 64px;
}

.nominate__heading {
    text-align: center;
    margin: 0 auto;   
}

.nominate__list {
    list-style: none;
    margin: -16px 0 0 -25px;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    font-size: 16px;
    line-height: 28px;
}

.nominate__list::before {
    content: '';
    display: table;
}

.nominate__item {
    flex: none;
    width: calc( (100% - 75px ) / 3 );
    margin: 16px 0 0 25px;
}

@media (max-width: 991.98px) {

    .nominate__item {
        width: calc( (100% - 75px ) / 2 );
    }

}

@media (max-width: 767.98px) {

    .modal__heaader {
        justify-content: space-between;
    }

    .modal__heaader-logo {
        display: block;
    }

    .modal__close {
        padding: 20px;
    }

    .nominate {
        padding: 0 0 40px;
    }

    .nominate__heading {
        width: 140px;
    }

    .nominate__heading-img {
        width: 100%;
    }

    .nominate__list {
        display: block;
    }

    .nominate__item {
        width: auto;
    }

}

/*
========================================================================
closed
========================================================================
*/

.special-gift__closed,
.thanks__gift-closed{
    color: rgb(237, 71, 47);
}

/*
========================================================================
animation
========================================================================
*/


@keyframes fade-in {
	0% {
	  display: none !important;
	  opacity: 0;
	}

	1% {
	  display: block !important;
	  opacity: 0;
	}

	100% {
	  display: block !important;
	  opacity: 1;
	}
}

@keyframes fade-out {
	0% {
	  display: block !important;
	  opacity: 1;
	}

	99% {
	  display: block !important;
	  opacity: 0;
	}

	100% {
	  display: none !important;
	  opacity: 0;
	}
}