/******************************
*******************************

ALL

*******************************
******************************/
* {
    font-family: 'Noto Serif JP', sans-serif;
    scroll-behavior: smooth;
}

html,
body {
    position: relative;
    color: #494e56;
    background: #f7f7f7;
}

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

h2 {
    font-size: 14px;
    font-weight: bold;
    letter-spacing: 4px;
}

/*******************************
header
*******************************/
header {
    position: fixed;
    top: 0;
    z-index: 10;
}

header h1 {
    width: 200px;
    margin-left: -10px;
}

/***************
nav.ac-container
***************/
.ac-container {
    width: 300px;
    margin: 10px 0;
}

.ac-container label {
    width: 89px;
    background: url(../img/menu_icon_x2.png) no-repeat;
    background-size: 89px;
    position: relative;
    display: block;
    height: 24px;
    margin-bottom: 0;
    cursor: pointer;
    transition: 0.3s;
}

.ac-container input:checked ~ label {
    background: url(../img/menu_icon_close_x2.png) no-repeat;
    background-size: 89px;
}

.ac-container input {
    display: none;
}

.ac-container div.ac-small {
    background: #fff;
    margin-top: -1px;
    overflow: hidden;
    position: relative;
    height: 0;
    z-index: 10;
    transition:
        height 0.3s ease-in-out,
        box-shadow 0.6s linear;
}

.ac-container input:checked ~ div {
    transition:
        height 0.5s ease-in-out,
        box-shadow 0.1s linear;
}

.ac-container input:checked ~ div.ac-small {
    height: 400px;
}

.ac-container div p {
    color: #777;
    line-height: 23px;
    font-size: 14px;
    padding: 20px;
}

.ac-container .ac-small ul {
    list-style-type: none;
    padding: 0 48px 0;
}

.ac-container .ac-small ul li {
    font-size: 14px;
    margin-top: 32px;
}

.ac-container .ac-small ul li a {
    color: #4A4C54;
    font-weight: 900;
    transition: 0.3s ease-out;
}

.ac-container .ac-small ul li a:hover {
    color: #FF7D8D;
    text-decoration: none;
}


/***************
.Registration
***************/
.Registration {
    display: none !important;
    /*display: block;*/
    color: #fff;
    text-align: center;
    line-height: 55px;
    text-shadow: 1px 1px 0 #cc4a5a;
    background: url(../img/cta_btn_bg.svg) no-repeat center;
    width: 178px;
    height: 55px;
}

.Registration i {
    margin-left: 1em;
}

.Registration:hover {
    color: #fff;
    text-decoration: none;
    opacity: 1;
    -webkit-animation: flash 1.5s;
    animation: flash 1.5s;
}

@-webkit-keyframes flash {
    0% {
        opacity: .4;
    }

    100% {
        opacity: 1;
    }
}

@keyframes flash {
    0% {
        opacity: .4;
    }

    100% {
        opacity: 1;
    }
}

/*******************************
#Main-Ttl
*******************************/
#Main-Ttl #EventEnd{
    margin-top: 24px;
}
#Main-Ttl #EventEnd .text{
    color: #FF7D8D;
    font-weight: bold;
}


/*******************************
#About
*******************************/
#About {
    position: relative;
}

#About .kirakira {
    position: absolute;
    top: -80px;
    left: -375px;
}


/*******************************
#Schedule
*******************************/
#Schedule {
    margin-top: 200px;
}

#Schedule h2 {
    line-height: 2;
}

#Schedule .place {
    line-height: 2;
    margin-bottom: 0;
}

#Schedule .img-box {
    margin-top: 40px;
}


/*******************************
#OSM
*******************************/
#OSM .bg {
    background: url(../img/paper_top.png) repeat-x center -4px, url(../img/paper_bottom.png) repeat-x center 101% #FF7D8D;
}

#OSM h2 {
    color: #fff;
}

#OSM .img-box {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
}

#OSM .img-box iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}


/*******************************
#Session
*******************************/
#Session ul li a {
    color: #494e56;
    text-decoration: underline;
    transition: 0.3s;
}

#Session ul li a:hover {
    color: #ff7d8d;
    text-decoration: none;
}

#Session section ul li img {
    margin-top: -5px;
}


/*******************************
#Consul
*******************************/
#Consul {
    background: #A6D6FF;
}

#Consul-B .btn-box {}

#Consul-B .btn-box a.btn {
    width: calc(50% - 1em);
    margin-top: 1em;
    margin-left: 1em;
}


/*******************************
#AccessTicket
*******************************/
#AccessTicket {
    margin-top: 200px;
}

#AccessTicket h2 {
    line-height: 2;
}

#AccessTicket .place {
    line-height: 2;
    margin-bottom: 0;
}

#AccessTicket .Ticket-sec {
    background: #fff;
    margin-top: 80px;
    padding: 50px 90px;
}

#AccessTicket .Ticket-sec h3 {
    font-size: 20px;
    font-weight: bold;
}

#AccessTicket .Ticket-sec .price {
    color: #828489;
    font-size: 55px;
    font-weight: bold;
    letter-spacing: 4px;
}

#AccessTicket .Ticket-sec .note {
    line-height: 2;
    margin-top: 40px;
    margin-bottom: 0;
}

#AccessTicket .Registration {
    margin: 80px auto 0;
}

#AccessTicket ul.note {
    font-size: 14px;
    line-height: 2;
    list-style-type: none;
    margin-top: 50px;
    padding-left: 0;
}

#AccessTicket ul.note li:before {
    content: '※';
}

/***************
#map
***************/
#map {
    margin-top: 120px;
}

#map .address {
    line-height: 2;
}

#map .googlemap {
    line-height: 0;
    border: 1px solid #939393;
    margin-top: 30px;
}

#map .googlemap iframe {
    width: 100% !important;
}


/*******************************
#Sponsor
*******************************/
#Sponsor h3 {
    font-weight: bold;
}

#Sponsor .text-box {
    line-height: 2;
    margin-top: 40px;
}

#Sponsor .link {
    margin-top: 60px;
}

#Sponsor .link a {
    position: relative;
    color: #ff7d8d;
    padding: 0 1em;
    transition: 0.3s;
}

#Sponsor .link a .arrow {
    position: absolute;
    right: -0.5em;
    transition: 0.3s;
}

#Sponsor .link a:hover {
    text-decoration: none;
    text-shadow: 0 0 3px #ff9faf;
}

#Sponsor .link a:hover .arrow {
    right: -1em;
}

#Sponsorship {
    margin-bottom: 100px;
}

#Sponsorship .img-box {
    margin-bottom: 40px;
}

#funs {
    margin-bottom: 100px;
}


/*******************************
footer
*******************************/
footer {
    color: #EEEDF6;
    background: url(../img/footer_bg.png) no-repeat left #000;
    background-size: cover;
}

footer .box {
    flex-direction: column;
    height: 100%;
}

footer .box p {
    line-height: 24px;
    margin-top: 24px;
}

footer .box .copyright {
    font-size: 11px;
    margin-bottom: 16px;
}

footer .box p .l2d-logo {
    width: 227px;
}

footer .box p .l2d-logo img {
    height: 24px;
}

footer .box p .cs-logo {
    width: 227px;
}

footer .box p .cs-logo img {
    height: 15px;
}

footer .box p .sns {
    margin-left: 16px;
}

footer .box p .sns img {
    width: 24px;
}

footer .img-box {
    text-align: center;
    margin-top: -60px;
}

footer .img-box img {
    width: 90%;
}

footer .arrow img {
    width: 30px;
}


/*******************************
.twitter-share
*******************************/
.twitter-share {
    position: relative;
    top: 0;
    color: #fff;
    font-size: 14px;
    font-weight: bold;
    text-shadow: -1px -1px 0 #666;
    background: #55acee;
    border-radius: 8px;
    box-shadow: 0 6px 0 #0068aa;
    padding: 6px 24px;
    transition: 0.2s;
}

.twitter-share i {
    margin-right: 8px;
}

.twitter-share:hover {
    top: 4px;
    color: #fff;
    text-decoration: none;
    box-shadow: 0 2px 0 #0068aa;
}



/******************************
*******************************

MOBILE

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

    .pc {
        display: none;
    }


    /*******************************
    #Main-Ttl
    *******************************/
    #Main-Ttl {
        margin-top: 38px;
    }


    /*******************************
    #Hero
    *******************************/
    #Hero .date {
        font-size: 18px;
        font-weight: bold;
        margin-top: 40px;
    }

    #Hero .date .number {
        font-size: 2em;
    }

    #Hero .Registration {
        margin: 30px auto 0;
    }


    /*******************************
    #About
    *******************************/
    #About {
        margin-top: 100px;
    }

    #About .img-box img {
        width: 164px;
    }

    #About .text-box {
        font-size: 18px;
        line-height: 2;
        margin-top: 50px;
    }

    #Catchcopy {
        font-size: 26px;
        font-weight: bold;
        text-align: center !important;
        margin-top: 50px;
    }


    /*******************************
    #Schedule
    *******************************/
    #Schedule {
        margin-top: 100px;
    }


    /*******************************
    #OSM
    *******************************/
    #OSM {
        margin-top: 100px;
    }

    #OSM .bg {
        padding-top: 80px;
        padding-bottom: 100px;
    }

    #OSM .img-ttl {
        text-align: center;
        margin-top: 20px;
    }

    #OSM .img-ttl img {
        width: 95%;
    }

    #OSM .text-box {
        color: #f7f7f7;
        line-height: 2;
        margin-top: 32px;
    }

    #OSM .osm-time {
        color: #f7f7f7;
        line-height: 2;
        margin-top: 20px;
    }


    /*******************************
    #Session
    *******************************/
    #Session {
        margin-top: 100px;
    }

    #Session section .img-box {
        text-align: center;
        margin-top: 30px;
    }

    #Session section .img-box img {
        width: 80%;
    }

    #Session section dl {
        margin-top: 60px;
    }

    #Session section dl dt {
        font-size: 34px;
        font-weight: bold;
    }

    #Session section dl dd {
        line-height: 2;
        margin-top: 30px;
    }

    #Session section ul {
        list-style-type: none;
        padding: 0;
    }

    #Session section ul li {
        line-height: 40px;
    }

    #Session section ul li span {
        display: inline-block;
        color: #828489;
        width: 80px;
    }

    #Session section ul li img {
        height: 24px;
    }

    #Session #Session-B {
        border-top: 1px solid #c4c4c4;
        margin-top: 80px;
        padding-top: 80px;
    }


    /*******************************
    #Consul
    *******************************/
    #Consul {
        margin-top: 100px;
    }

    #Consul section {
        padding-top: 60px;
        padding-bottom: 60px;
    }

    #Consul #Consul-A {
        border-bottom: 30px solid #f7f7f7;
    }

    #Consul section h3 {
        font-size: 34px;
        font-weight: bold;
    }

    #Consul section .img-box {
        margin-top: 32px;
    }

    #Consul section .text-box {
        line-height: 2;
    }

    #Consul section .text-box p {
        margin-top: 40px;
    }

    #Consul section .text-box ul {
        font-size: 14px;
        margin-top: 40px;
        padding-left: 1em;
    }

    #Consul section .text-box ul li {
        text-indent: -1em;
        list-style-type: none;
    }

    #Consul section .text-box ul li:before {
        content: '※';
    }


    /*******************************
    #AccessTicket
    *******************************/
    #AccessTicket {
        margin-top: 100px;
    }

    #AccessTicket #Ticket-B {
        margin-top: 20px;
    }

    #AccessTicket .Ticket-sec {
        border-right: 15px solid #f7f7f7;
        border-left: 15px solid #f7f7f7;
        padding: 40px 25px;
    }

    #AccessTicket .Ticket-sec h3 {
        font-size: 18px;
    }

    #AccessTicket .Ticket-sec .price {
        margin-top: 20px;
    }

    #AccessTicket .Ticket-sec .note {
        margin-top: 30px;
    }

    #AccessTicket .Registration {
        margin: 60px auto 0;
    }

    #AccessTicket ul.note {
        padding: 0 15px;
    }

    /***************
    #map
    ***************/
    #map {
        margin-top: 50px;
    }


    /*******************************
    #Sponsor
    *******************************/
    #Sponsor {
        margin-top: 100px;
    }

    #Sponsor h2 {
        margin-bottom: 40px;
    }

    #Sponsor .img-box img {
        width: 80%
    }

    #Sponsor h3 {
        font-size: 22px;
        margin-top: 40px;
    }

    #Sponsor .text-box {
        line-height: 2;
        margin-top: 32px;
    }

    #Sponsor .link {
        font-size: 18px;
    }


    /*******************************
    footer
    *******************************/
    footer {
        background-position: -300px;
        margin-top: 160px;
        padding-top: 60px;
    }

    footer .copyright {
        padding-top: 40px;
    }



}




/******************************
*******************************

DESKTOP

*******************************
******************************/
@media (min-width:575px) {

    .pc {
        display: block;
    }

    .mobile {
        display: none;
    }

    /*******************************
    header
    *******************************/
    header .Registration {
        position: absolute;
        top: 20px;
        right: 20px;
    }


    /*******************************
    #Main-Ttl
    *******************************/
    #Main-Ttl {
        margin-top: 150px;
    }

    #Main-Ttl .main-logo img {
        max-width: 750px;
    }

    #Main-Ttl .date {
        font-size: 24px;
        font-weight: bold;
    }

    #Main-Ttl .date .number {
        font-size: 2em;
    }

    #Main-Ttl .date .place {
        padding-left: 1em;
    }

    #Main-Ttl .arrow {
        margin-top: 110px;
        animation-duration: 2s;
    }

    #Main-Ttl .arrow img {
        width: 31px;
    }


    /*******************************
    #Hero
    *******************************/
    #Hero {
        margin-top: 100px;
    }


    /*******************************
    #About
    *******************************/
    #About {
        margin-top: 80px;
    }

    #About .text-box {
        font-size: 20px;
        line-height: 2;
        margin-top: 70px;
    }

    #About #Catchcopy {
        font-size: 55px;
        font-weight: bold;
        margin-top: 160px;
    }


    /*******************************
    #Schedule
    *******************************/
    #Schedule .img-box img {
        width: 90%;
    }


    /*******************************
    #OSM
    *******************************/
    #OSM {
        margin-top: 200px;
    }

    #OSM .bg {
        padding-top: 130px;
        padding-bottom: 160px;
    }

    #OSM h2 {
        padding-top: 40px;
    }

    #OSM .img-ttl {
        padding-left: 90px;
    }

    #OSM .img-box {
        margin-top: 40px;
    }

    #OSM .img-box iframe {
        padding: 0 10% 10%;
    }

    #OSM .text-box {
        color: #fff;
        font-size: 20px;
        line-height: 2;
        margin-top: -20px;
    }

    #OSM .osm-time {
        color: #fff;
        font-size: 16px;
        line-height: 2;
        margin-top: 20px;
    }


    /*******************************
    #Session
    *******************************/
    #Session {
        margin-top: 160px;
    }

    #Session h2 {
        margin-bottom: 0;
    }

    #Session .text-box {
        flex-direction: column;
    }

    #Session dl {
        margin-bottom: 0;
    }

    #Session dl dt {
        font-size: 34px;
        line-height: 1.5;
    }

    #Session dl dd {
        line-height: 2;
        margin-top: 32px;
    }

    #Session ul {
        margin-bottom: 0;
        padding: 0;
    }

    #Session ul li {
        line-height: 40px;
        list-style-type: none;
        padding-right: 16px;
        margin-top: 16px;
    }

    #Session ul li.w60 {
        width: 60%;
    }

    #Session ul li.w40 {
        width: 40%;
    }

    #Session ul li span {
        display: inline-block;
        width: 70px;
    }

    #Session ul li img {
        height: 40px;
    }

    /***************
    #Session-B
    ***************/
    #Session-B {
        margin-top: 200px;
    }


    /*******************************
    #Consul
    *******************************/
    #Consul {
        background: url(../img/paper_top.png) repeat-x center -4px, url(../img/paper_bottom.png) repeat-x center 101% #A6D6FF;
        margin-top: 200px;
    }

    #Consul section {
        padding-top: 90px;
        padding-bottom: 90px;
    }

    #Consul section h3 {
        font-size: 34px;
        font-weight: bold;
    }

    #Consul section .img-box {
        margin-top: 40px;
    }

    #Consul section .text-box {
        line-height: 2;
    }

    #Consul section .text-box p {
        margin-top: 40px;
    }

    #Consul section .text-box ul {
        font-size: 14px;
        margin-top: 40px;
        padding-left: 1em;
    }

    #Consul section .text-box ul li {
        text-indent: -1em;
        list-style-type: none;
    }

    #Consul section .text-box ul li:before {
        content: '※';
    }

    #Consul-A {
        border-right: 15px solid #f7f7f7;
        padding-right: 95px;
    }

    #Consul-B {
        border-left: 15px solid #f7f7f7;
        padding-left: 95px;
    }


    /*******************************
    #AccessTicket
    *******************************/
    #AccessTicket .Ticket-sec .price {
        margin-top: 30px;
    }

    #AccessTicket .Registration {
        transform: scale(1.3, 1.3);
    }

    #Ticket-A {
        border-right: 15px solid #f7f7f7;
    }

    #Ticket-B {
        border-left: 15px solid #f7f7f7;
    }


    /*******************************
    #Sponsor
    *******************************/
    #Sponsor {
        margin-top: 200px;
    }

    #Sponsor h2 {
        margin-bottom: 80px;
    }

    #Sponsor .img-box img {
        width: 90%
    }

    #Sponsor h3 {
        font-size: 34px;
    }

    #Sponsor .text-box {
        font-size: 18px;
    }

    #Sponsor .link {
        font-size: 20px;
    }


    /*******************************
    .to-top-arrow
    *******************************/
    .to-top-arrow {
        transform: rotateX(180deg);
        margin-top: 200px;
    }


    /*******************************
    footer
    *******************************/
    footer {
        margin-top: 40px;
    }

}