@charset "UTF-8";
@import url("https://fonts.googleapis.com/earlyaccess/notosansjapanese.css");
@import url("https://use.fontawesome.com/releases/v6.5.1/css/all.css");

:root {
    /* --btn-color-1: #94e4dd88; */
    --btn-color-1: #d96051;
    --btn-color-2: #e4c19488;
    --serv-color-1: #1fa4db; --serv-color-1b: #1fa4db60; --serv-color-1f: #1984a5; /* ネットワーク */
    --serv-color-2: #e3750f; --serv-color-2b: #e3750f40; --serv-color-2f: #864314; /* 研究データ基盤 */
    --serv-color-3: #f3bb31; --serv-color-3b: #f3bb3168; --serv-color-3f: #936e22; /* 認証基盤 */
    --serv-color-4: #90BE37; --serv-color-4b: #90BE3760; --serv-color-4f: #5f7725; /* クラウド */
    --serv-color-5: #8d498c; --serv-color-5b: #8d498c60; --serv-color-5f: #542d54; /* 情報セキュリティ */
    --serv-color-6: #006732; --serv-color-6b: #00673260; --serv-color-6f: #01421e; /* 学術情報流通 */
    --serv-color-7: #e26974; --serv-color-7b: #e2697460; --serv-color-7f: #994a53; /* 連携 */
    --serv-color-8: #e26974; --serv-color-8b: #e2697460; --serv-color-8f: #994a53; /* 人材育成 */
    --serv-color-9: #11366e; --serv-color-9b: #11366e40; --serv-color-9f: #0b2142; /* その他 */
    --schedule-tab-sticky-top: 70px;
    --event-date-sticky-top: calc( 70px + 50px );
    --type-sticky-top:       calc( 70px + 50px );
    --room-sticky-top:       calc( 70px + 50px + 20px );
    --room-sticky-top:       calc( 70px + 50px + 25px );
    --sp-schedule-tab-sticky-top: 0;
    --sp-event-date-sticky-top: calc( 0px + 70px );
    --sp-type-sticky-top:       calc( 0px + 70px );
    --sp-room-sticky-top:       calc( 0px + 70px + 4.6vw ); 
    --sp-room-sticky-top:       calc( 0px + 70px + 6.0vw );
    --accent-color: #304E99;
    --of-nav-sp-height: 8dvh;
}


.time-table {
    position: relative;
}


.schedule-tab {
    position: sticky;
    /* top: 2px; */
    top: var(--schedule-tab-sticky-top);
    z-index: 99;
    display: grid;
    /* display: none; */
    grid-template-rows: 40px;
    grid-template-columns: repeat(3, 120px);
    gap: 12px;
    place-content: center;
    place-items: stretch center;
    width: 100%;/*900px;*/
    height: 50px;
    margin-inline: auto;
    margin-bottom: 10px;
    background-color: #d7dee7;
    /* border-radius: 4px; */
}

.schedule-tab .day-tab {
    display: grid;
    place-items: center;
    place-self: stretch;
    font-size: 1.4rem;
    font-weight: bold;
    cursor: pointer;
    background-color: #fff;
    border-radius: 8px;
    transition-timing-function: cubic-bezier(0.4,0,0.2,1);
    transition-duration: 300ms;
}

@media ( hover: hover ) and ( pointer: fine ) {
    .schedule-tab .day-tab:hover {
        color: #fff;
        text-decoration: underline;
        background-color: var(--btn-color-1);
        /* transition-timing-function: cubic-bezier(0.4,0,0.2,1); */
        /* transition-duration: 300ms; */
    }
}

.schedule-tab .active {
    color: #fff;
    background-color: var(--btn-color-1);
}

@media ( width <= 640px ) {
    .schedule-tab {
        top: var(--sp-schedule-tab-sticky-top);
        grid-template-rows: 50px;
        /* grid-template-columns: auto auto auto; */
        grid-template-columns: 1fr 1fr 1fr;
        gap: 8px;
        width: 100%;
        height: 70px;
        padding-inline: 12px;
    }

    .schedule-tab.padding-right {
        padding-right: 75px;
    }

    .schedule-tab .day-tab {
        padding-inline: 4vw;
        font-size: 3.4vw;
    }
}

/* タイムテーブル 背景 */
.bg {
    grid-column: 2 / span 4;
    justify-self: stretch;
    background-color: #f8fafd;
}

@media ( width <= 640px ) {
    .bg {
        grid-column: 2 / span 4;
    }
}

.bg01 { grid-row:  3 / span 3; }
.bg02 { grid-row:  9 / span 3; }
.bg03 { grid-row: 15 / span 3; }
.bg04 { grid-row: 21 / span 3; }
.bg05 { grid-row: 27 / span 3; }
.bg06 { grid-row: 33 / span 3; }
.bg07 { grid-row: 39 / span 3; }
.bg08 { grid-row: 45 / span 3; }
.bg09 { grid-row: 51 / span 3; }
.bg10 { grid-row: 57 / span 3; }
.bg11 { grid-row: 63 / span 3; }

/* タイムテーブル 時刻ラベル */

.t1000 { grid-row-start:  3; }
.t1010 { grid-row-start:  4; }
.t1020 { grid-row-start:  5; }
.t1030 { grid-row-start:  6; }
.t1040 { grid-row-start:  7; }
.t1050 { grid-row-start:  8; }
.t1100 { grid-row-start:  9; }
.t1110 { grid-row-start: 10; }
.t1120 { grid-row-start: 11; }
.t1130 { grid-row-start: 12; }
.t1140 { grid-row-start: 13; }
.t1150 { grid-row-start: 14; }
.t1200 { grid-row-start: 15; }
.t1210 { grid-row-start: 16; }
.t1220 { grid-row-start: 17; }
.t1230 { grid-row-start: 18; }
.t1240 { grid-row-start: 19; }
.t1250 { grid-row-start: 20; }
.t1300 { grid-row-start: 21; }
.t1310 { grid-row-start: 22; }
.t1320 { grid-row-start: 23; }
.t1330 { grid-row-start: 24; }
.t1340 { grid-row-start: 25; }
.t1350 { grid-row-start: 26; }
.t1400 { grid-row-start: 27; }
.t1410 { grid-row-start: 28; }
.t1420 { grid-row-start: 29; }
.t1430 { grid-row-start: 30; }
.t1440 { grid-row-start: 31; }
.t1450 { grid-row-start: 32; }
.t1500 { grid-row-start: 33; }
.t1510 { grid-row-start: 34; }
.t1520 { grid-row-start: 35; }
.t1530 { grid-row-start: 36; }
.t1540 { grid-row-start: 37; }
.t1550 { grid-row-start: 38; }
.t1600 { grid-row-start: 39; }
.t1610 { grid-row-start: 40; }
.t1620 { grid-row-start: 41; }
.t1630 { grid-row-start: 42; }
.t1640 { grid-row-start: 43; }
.t1650 { grid-row-start: 44; }
.t1700 { grid-row-start: 45; }
.t1710 { grid-row-start: 46; }
.t1720 { grid-row-start: 47; }
.t1730 { grid-row-start: 48; }
.t1740 { grid-row-start: 49; }
.t1750 { grid-row-start: 50; }
.t1800 { grid-row-start: 51; }
.t1810 { grid-row-start: 52; }
.t1820 { grid-row-start: 53; }
.t1830 { grid-row-start: 54; }
.t1840 { grid-row-start: 55; }
.t1850 { grid-row-start: 56; }
.t1900 { grid-row-start: 57; }
.t1910 { grid-row-start: 58; }
.t1920 { grid-row-start: 59; }
.t1930 { grid-row-start: 60; }


/* タイムテーブル 持ち時間 */
.min10  { grid-row-end: span  1; }
.min20  { grid-row-end: span  2; }
.min30  { grid-row-end: span  3; }
.min40  { grid-row-end: span  4; }
.min50  { grid-row-end: span  5; }
.min60  { grid-row-end: span  6; }
.min70  { grid-row-end: span  7; }
.min80  { grid-row-end: span  8; }
.min90  { grid-row-end: span  9; }
.min100 { grid-row-end: span 10; }
.min110 { grid-row-end: span 11; }
.min120 { grid-row-end: span 12; }
.min130 { grid-row-end: span 13; }
.min140 { grid-row-end: span 14; }
.min150 { grid-row-end: span 15; }
.min160 { grid-row-end: span 16; }
.min170 { grid-row-end: span 17; }
.min180 { grid-row-end: span 18; }

/* タイムテーブル 会場ラベル */
.room1  { grid-column-start: 2; }
.room2  { grid-column-start: 3; }
.room3  { grid-column-start: 4; }
.room4  { grid-column-start: 5; }
.room5  { grid-column-start: 6; }
.room6  { grid-column-start: 7; }
.room7  { grid-column-start: 8; }
.room8  { grid-column-start: 9; }
.joint  { grid-column-end: span 2; }

.table {
    position: relative;
    display: grid;
    gap: 0 2px;
    place-content: center;
    place-items: stretch center;
    width: 930px;
    margin: auto;
    margin-top: 10px;
}

@media ( width <= 640px ) {
    .table {
        width: 100%;
        padding-inline: 1vw;
    }
}


/* タイムテーブル 会場 */
.type {
    position: sticky;
    /* top: 55px;*/
    top: var(--type-sticky-top);
    z-index: 9;
    display: grid;
    grid-row-start: 1;
    grid-column-end: span 1;
    place-items: center center;
    place-self: stretch;
    color: #1c1c1c;
    background-color: #fff;
    border: solid 1px #ccc;
}
/*
@media ( width <= 640px ) {
.type {
top: var(--sp-type-sticky-top);
}
}
*/
.hybrid {
    z-index: 9;
    grid-row-start: 1;
    grid-column: 2 / span 3;
    font-size: 1.3rem;
    /* border-top-left-radius: 4px; */
}
.hybrid.r1 { grid-column: 2 / span 1; }
.hybrid.r2 { grid-column: 2 / span 2; }
.hybrid.r3 { grid-column: 2 / span 3; }
.hybrid.r4 { grid-column: 2 / span 4; }
.hybrid.r5 { grid-column: 2 / span 5; }
.hybrid.r6 { grid-column: 2 / span 6; }
.hybrid.r7 { grid-column: 2 / span 7; }
.hybrid.r8 { grid-column: 2 / span 8; }

@media ( width <= 640px ) {
    .hybrid {
        font-size: 3.1vw;
        z-index: 2;
        border-bottom: none;
        height: 6vw;
        top: -80px; /*横sc*/
    }
}

.online {
    width: 220px;
    grid-column: span 1;
    grid-row: 1 / span 2;
    font-size: 1.4rem;
    color: #fff;
    background-color: #627288;
    border-bottom-right-radius: 4px;
}

@media ( width <= 640px ) {
    .online {
        /*        grid-row: 53 / span 3;
        grid-column: 2 / span 1;
        margin-top: calc( 1.0vw + 2px );*/
        top: 0;
        font-size: 3.4vw;
        color: #fff;
        background-color: #627288;
        /* border-radius: 4px; */
        border-bottom-right-radius: 4px;
        border-bottom-left-radius: 4px;
        width: unset;
    }
}

.room {
    position: sticky;
    width: 220px;
    top: var(--room-sticky-top);
    z-index: 9;
    display: grid;
    grid-row-start: 2;
    grid-column-end: span 1;
    place-items: center;
    place-self: stretch;
    font-size: 1.4rem;
    color: #fff;
    background-color: #627288;
}

@media ( width <= 640px ) {
    .room {
        top: var(--sp-room-sticky-top);
        font-size: 3.4vw;
        width: unset;
        z-index: 2;
        top: -80px; /*横sc*/
    }
}

.room.room1 {
    border-bottom-left-radius: 4px;
}

@media ( width <= 640px ) {
    .room.room3 {
        border-bottom-right-radius: 4px;
    }
}

.event_date {
    position: sticky;
    top: var(--event-date-sticky-top);
    z-index: 9;
    display: grid;
    grid-template-rows: auto auto;
    grid-template-columns: auto auto;
    grid-row: 1 / span 2;
    gap: 0;
    place-content: center;
    place-items: start end;
    place-self: stretch stretch;
    background-color: #fff;
    border: solid 1px #ccc;
    /* border-radius: 4px; */
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px;
}

.event_date .month {
    grid-row-start: 1;
    grid-column-start: 1;
    font-size: 1.2rem;
}

.event_date .day {
    grid-row-start: 1;
    grid-column-start: 2;
    font-size: 1.6rem;
    font-weight: bold;
}

.event_date .dow {
    grid-row-start: 2;
    grid-column-end: span 2;
    font-size: 1.2rem;
}

@media ( width <= 640px ) {
    .event_date {
        top: var(--sp-event-date-sticky-top);
    }

    .event_date .month {
        font-size: 3.2vw;
    }

    .event_date .day {
        font-size: 3.6vw;
    }

    .event_date .dow {
        font-size: 3.2vw;
    }
}

/* タイムテーブル 時刻 */
.time {
    place-self: start end;
    /* margin-top: -4px; */
    margin-top: -3px;
    font-size: 1.3rem;
}


@media ( width <= 640px ) {
    .time {
        margin-top: -3px;
        font-size: 3.2vw;
        padding-right: 10px;
    }

}

.sptime {
    display: none;
}
/*
@media (width <= 640px) {
.sptime {
display: block;
grid-column-start: 1;
place-self: start end;
padding-right: 10px;
margin: -3px 0;
font-size: 3.4vw;
}
}
*/

/* タイムテーブル トラック */
.track {
    position: relative;
    display: grid;
    grid-template-rows: 1fr auto auto;
    /* grid-column-end: span 1; */
    gap: 2px 4px;
    place-items: end start;
    place-self: stretch;
    padding: 2px 2px 5px;
    line-height: 1.5;
    background-color: #fff;
    /* border: 1px solid #ccc; */
    border-top: 1px solid #ccc;
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    border-radius: 8px;
    transition-timing-function: cubic-bezier(0.4,0,0.2,1);
    transition-duration: 300ms;
    overflow: hidden;
}

.track::after {
    content: "";
    position: absolute;
    left: 1px;
    right: 1px;
    bottom: 0px;
    height: 13px;
    background: linear-gradient(
        to bottom,
        rgba(255,255,255,0),
        rgba(255,255,255,1)
    );
    pointer-events: none;
    border-bottom-right-radius: 7px;
}
.title     { grid-row: 1; }
.attention { grid-row: 2; }
.hash      { grid-row: 3; }
.category  { grid-row: 4; }


.track .title {
    place-self: start start;
    padding-inline: 3px;
    font-size: 1.6rem;
    font-weight: bold;
    color: #1c1c1c;
    text-align: left;
}

.track > a {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;           /* trackの高さを使う */
    text-decoration: none;
    color: inherit;
}
.track .bottom {
    margin-top: auto;
}


.track a .title span,
.track .title a span {
    display: inline-block;
}

.track .hash {
    place-self: end end;
    width: 100%;
    padding-inline: 3px;
    font-size: 1.2rem;
    font-weight: bold;
    color: #1c1c1c;
}

.track .hash div {
    text-align: right;
}

.track .hash div span {
    display: inline-block;
}

.track .category {
    display: flex;
    flex-direction: column;
    gap: 2px;
    place-self: end end;
    min-width: 100px;
    font-weight: bold;
    align-items: flex-end;
}

.track .category div {
    display: inline-block;
    padding: 0 8px;
    text-align: left;
    border-radius: 8px;
    min-width: fit-content;
    font-size: 1.23rem;
}

@media ( width <= 640px ) {
    .track .title {
        font-size: 3.9vw;
        font-weight: normal;
    }

    .track .hash {
        display: none;
    }

    .track .category {
        display: none;
    }
}

.track .attention {
    place-self: center start;
    padding-inline: 3px;
    margin: 2px;
    font-size: 1.4rem;
    font-weight: normal;
    color: #f00;
    text-align: left;
    width: 100%;
}

@media ( width <= 640px ) {
    .track .attention {
        padding: 0.5vw 1vw;
        margin: 2px;
        font-size: 2.7vw;
    }
}

/* カテゴリー 色指定 */
.c1 { border-left: solid 8px var(--serv-color-1); }
.c2 { border-left: solid 8px var(--serv-color-2); }
.c3 { border-left: solid 8px var(--serv-color-3); }
.c4 { border-left: solid 8px var(--serv-color-4); }
.c5 { border-left: solid 8px var(--serv-color-5); }
.c6 { border-left: solid 8px var(--serv-color-6); }
.c7 { border-left: solid 8px var(--serv-color-7); }
.c8 { border-left: solid 8px var(--serv-color-8); }
.c9 { border-left: solid 8px var(--serv-color-9); }

@media ( width <= 640px ) {
    .c1 { border-left: solid 6px var(--serv-color-1); }
    .c2 { border-left: solid 6px var(--serv-color-2); }
    .c3 { border-left: solid 6px var(--serv-color-3); }
    .c4 { border-left: solid 6px var(--serv-color-4); }
    .c5 { border-left: solid 6px var(--serv-color-5); }
    .c6 { border-left: solid 6px var(--serv-color-6); }
    .c7 { border-left: solid 6px var(--serv-color-7); }
    .c8 { border-left: solid 6px var(--serv-color-8); }
    .c9 { border-left: solid 6px var(--serv-color-9); }
}

.c1:hover,
.track.c1[active] { background-color: var(--serv-color-1b); }
.c2:hover,
.track.c2[active] { background-color: var(--serv-color-2b); }
.c3:hover,
.track.c3[active] { background-color: var(--serv-color-3b); }
.c4:hover,
.track.c4[active] { background-color: var(--serv-color-4b); }
.c5:hover,
.track.c5[active] { background-color: var(--serv-color-5b); }
.c6:hover,
.track.c6[active] { background-color: var(--serv-color-6b); }
.c7:hover,
.track.c7[active] { background-color: var(--serv-color-7b); }
.c8:hover,
.track.c8[active] { background-color: var(--serv-color-8b); }
.c9:hover,
.track.c9[active] {
    background-color: var(--serv-color-9b);
}

.c1c {
    color: var(--serv-color-1f); background-color: var(--serv-color-1b);
}

.c2c {
    color: var(--serv-color-2f); background-color: var(--serv-color-2b);
}

.c3c {
    color: var(--serv-color-3f); background-color: var(--serv-color-3b);
}

.c4c {
    color: var(--serv-color-4f); background-color: var(--serv-color-4b);
}

.c5c {
    color: var(--serv-color-5f); background-color: var(--serv-color-5b);
}

.c6c {
    color: var(--serv-color-6f); background-color: var(--serv-color-6b);
}

.c7c {
    color: var(--serv-color-7f); background-color: var(--serv-color-7b);
}

.c8c {
    color: var(--serv-color-8f); background-color: var(--serv-color-8b);
}

.c9c {
    color: var(--serv-color-9f); background-color: var(--serv-color-9b);
}

.c1c::before {
    margin-right: 4px; color: var(--serv-color-1); content: '●';
}

.c2c::before {
    margin-right: 4px; color: var(--serv-color-2); content: '●';
}

.c3c::before {
    margin-right: 4px; color: var(--serv-color-3); content: '●';
}

.c4c::before {
    margin-right: 4px; color: var(--serv-color-4); content: '●';
}

.c5c::before {
    margin-right: 4px; color: var(--serv-color-5); content: '●';
}

.c6c::before {
    margin-right: 4px; color: var(--serv-color-6); content: '●';
}

.c7c::before {
    margin-right: 4px; color: var(--serv-color-7); content: '●';
}

.c8c::before {
    margin-right: 4px; color: var(--serv-color-8); content: '●';
}

.c9c::before {
    margin-right: 4px; color: var(--serv-color-9); content: '●';
}


.bg {
    pointer-events: none;
}

.track a .title span.sp_ {
    display: none !important;
}

@media ( width <= 640px ) {
    .track a .title span.pc_,
    .track .title a span.pc_ {
        display: none !important;
    }
    .track a .title span.sp_,
    .track .title a span.sp_ {
        display: inline-block !important;
    }



    .js-scrollable {
        overflow-x: auto;
        position: relative;
    }

   .header-layer .event_date {
        position: sticky;
        z-index: 11!important;
        background-color: #fff;
        left: -5px;
        margin-right: -8px;
    }
    .time {
        position: sticky;
        z-index: 10;
        background-color: #fff;
        padding: 0px 13px 24px;
        white-space: nowrap;
        left: -5px;
        margin-right: -4px;
    }

}
<!--
.scroll-hint-icon-wrap {
    z-index: 3!important;
}
-->