@charset 'UTF-8';

/*
COLORS
================================================ */
:root {
    --text: #333;
    --bg: #fff;
    --video-opacity: .5;

    --light-blue: #4db1ec;
    --blue: #1665cc;
    --purple: #b473bf;
    --pink: #ffb2c1;
    --orange: #ff9f67;
    --yellow: #ffd673;
    --light-green: #a2e29b;
    --green: #00a2af;
    --grey: #333;
    --white: #fff;
}
@media (prefers-color-scheme: dark) {
    :root {
        --text: #ddd;
        --bg: #000;
        --video-opacity: .7;
    }
}

/*
GENERAL STYLING
================================================ */
html {
    font-size: 100%;
}
body {
	color: var(--text);
    background: var(--bg);
    font-family: 'Bree Serif', sans-serif;
    transition: .5s;
}

/*
COMMON
================================================ */
p {
    line-height: 1.7;
}
img {
    max-width: 100%;
}
a:hover {
    color: #0bd;
}

/*
HEADER
================================================ */
header {
    position: relative;
}
.header-text {
    position: absolute;
    top: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 2;
    text-align: center;
}
.header-title {
    font-size: 2rem;
}
.header-name {
    font-size: 4rem;
    margin-bottom: 1rem;
}
.header-link {
    font-size: 1.25rem;
}
.header-pattern {
    position: absolute;
    z-index: 1;
    background-size: auto auto;
    background-image: repeating-linear-gradient(0deg, transparent, transparent 2px, var(--bg) 2px, var(--bg) 4px );
}
header video {
    object-fit: cover;
    object-position: center top;
    opacity: var(--video-opacity);
}
.header-text,
.header-pattern,
header video {
    width: 100vw;
    height: 90vh;
}

/*
GRID
================================================ */
.grid {
    width: 94vw;
    margin: 0 auto 3vw;
    display: grid;
    gap: 2vw;
    grid-template-columns: repeat(2, 46vw); /* (94 - 2) / 2 */
    grid-template-rows: repeat(8, 46vw);
}
.grid-item {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    filter: grayscale(100%);
}
.grid-big-top {
    grid-column: 1/3;
    grid-row: 2/3;
}
.grid-big-bottom {
    grid-column: 1/3;
    grid-row: 6/7;
}

/*
FOOTER
================================================ */
footer {
    text-align: center;
    padding-bottom: 3rem;
}
.footer-link {
    margin-bottom: .5rem;
}

/*
LIGHTBOX LUMINOUS
================================================ */
.lum-lightbox.lum-open {
    z-index: 4;
}
.lum-lightbox-inner img {
    max-width: 120vw;
    max-height: 80vh;
}

/*
DESKTOP SIZE
================================================ */
@media (min-width: 600px) {
/* Header */
    .header-name {
        font-size: 5rem;
    }
/* Grid */
    .grid {
        width: 80vw;
        gap: 1vw;
        grid-template-columns: repeat(3, 26vw); /* (80 - 2) / 3 */
        grid-template-rows: repeat(5, 26vw);
    }
    .grid-big-bottom {
        grid-column: 2/4;
        grid-row: 4/5;
    }
    .grid-item {
        transition: .3s;
    }
    .grid-item:hover {
        filter: grayscale(0);
        box-shadow: 0 0 2rem rgba(0, 0, 0, .5);
        transform: scale(1.1);
        z-index: 3;
        position: relative;
    }
}

/* =========================== */
/*  追加分 */
/* =========================== */

/* =========================== */
/*  イベント chap.5 */
/* =========================== */

/*
ABOUT
================================================ */
#about {
    padding: 4rem 1rem;
}

    #about h2 {
        background: linear-gradient(var(--yellow), var(--orange));
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        text-fill-color: transparent;
    }

    #about p {
        margin-bottom: 2rem;
    }

/*
NEWS
================================================ */
#news {
    background-image: linear-gradient(var(--light-green), var(--green));
    padding: 7rem 0;
    -webkit-clip-path: polygon(0 0, 100% 10%, 100% 90%, 0 100%);
    clip-path: polygon(0 0, 100% 10%, 100% 90%, 0 100%);
}

    #news h2 {
        color: var(--white);
    }

.news-table {
    color: var(--white);
    width: 100%;
}

    .news-table tr {
        border-bottom: 1px solid rgba(255,255,255,.5);
    }

    .news-table td {
        display: block;
        line-height: 1.5;
    }

.news-date {
    font-size: .875rem;
    padding-top: 1rem;
}

.news-content {
    padding-bottom: 1rem;
}

/*
SPEAKERS
================================================ */
#speakers {
    padding: 4rem 1rem;
}

.speakers-list {
    display: flex;
    flex-direction: row-reverse;
    align-items: flex-start;
    margin-bottom: 2rem;
}

.speakers-text {
    margin-left: 1rem;
}

#speakers h2 {
    background: linear-gradient(var(--light-blue), var(--blue));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-fill-color: transparent;
}

#speakers h3 {
    font-size: 1.5rem;
    margin-bottom: .5rem;
}

#speakers img {
    border-radius: 50%;
    width: 20%;
}

/*
TICKET
================================================ */
#ticket {
    background-image: linear-gradient(var(--pink), var(--purple));
    padding: 6rem 1rem 2rem;
    -webkit-clip-path: polygon(0 0, 100% 10%, 100% 100%, 0 100%);
    clip-path: polygon(0 0, 100% 10%, 100% 100%, 0 100%);
}

    #ticket h2 {
        color: var(--white);
    }

.ticket-form {
    max-width: 480px;
    margin: 0 auto 5rem;
}

    .ticket-form label {
        color: var(--white);
        display: block;
        margin-bottom: .5rem;
    }

.ticket-field {
    background: rgba(255,255,255,.6);
    padding: 1rem;
    width: 100%;
    margin-bottom: 1.5rem;
}

.ticket-btn {
    background: var(--grey);
    color: var(--white);
    display: block;
    width: 100%;
    padding: 1rem;
    margin-top: 1rem;
}

/*
FOOTER
================================================ */
.footer {
    border-top: 1px solid rgba(255,255,255,0.5);
    padding-top: 2rem;
    text-align: center;
    font-size: .875rem;
    color: var(--white);
}

    .footer a {
        text-decoration: underline;
    }

/*
DESKTOP SIZE
================================================ */
@media (min-width: 600px) {
    /* Common */
    h2 {
        font-size: 5rem;
    }

    a:hover,
    .ticket-btn:hover {
        transition: .3s;
    }

    a:hover {
        color: var(--blue);
    }

    .ticket-btn:hover {
        background: var(--blue);
    }

    /* Header */
    .btn-menu {
        display: none;
    }

    .main-nav {
        width: 100%;
        position: static;
        display: flex;
    }

        .main-nav li {
            margin: 0 0 0 1.5rem;
        }
    /* Hero */
    #hero h1 {
        font-size: 6.875rem;
    }

    .hero-date {
        font-size: 3rem;
    }
    /* News */
    .news-table td {
        display: table-cell;
    }

    .news-date {
        padding: 1.125rem 0 1rem 1rem;
    }

    .news-content {
        padding: 1rem 1rem 1rem 0;
    }
    /* Speakers */
    #speakers h2 {
        margin-bottom: 4rem;
    }

    .speakers-list {
        margin-bottom: 3rem;
    }

    .speakers-text {
        margin-left: 2rem;
    }
}

/*
COMMON
================================================ */
p {
    line-height: 1.7;
}
img {
    max-width: 100%;
}
h2 {
    font-size: 3rem;
    margin-bottom: 2rem;
}
h1,
h2 {
    text-align: center;
}
header,
h1,
h2,
.hero-date {
    font-family: impact, sans-serif;
}

/* Layout */
.wrapper {
    max-width: 800px;
    width: 100%;
    margin: 0 auto;
    padding: 0 1rem;
}


/* ============================================================== */
/*  なんとなく */
/* ============================================================== */

h2 {
	padding-left: 30px;
}
section {
	padding: 0 100px;
}


.container_flexContents{margin:0 3rem;display:flex;flex-wrap:wrap;justify-content:center}
.container_flexContents .basis_50{width:50%;padding:2rem}
.container_flexContents .basis_33{width:33%;padding:1.5rem}
.container_flexContents .basis_25{width:25%;padding:1rem}
.container_flexContents .basis_20{width:20%;padding:.5rem}
.container_flexContents img, .container_flexContents video{padding:0;margin:0}
.container_flexContents small{padding:0;margin:0}