@charset "utf-8";
/* CSS Document */

#top header{
    text-align: center;
    padding: 2% 5% 4%;
}

#top header h1{
    width: 90%;
    margin: 2% auto 1%;
    padding: 0;
    line-height: 0;
}
#top header h2{
    width: 90%;
    margin: 4% auto 2.5%;
    padding: 0;
    line-height: 1.4em;
    color: #006ab7;
}
#top .button .btn_balloon{
    font-size: var(--font16);
}
@media screen and (max-width: 768px) {
    #top header h1{
        width: 100%;
        margin: 5vw auto 1vw;
        padding: 0;
        line-height: 0;
    }
}

#top .copy_statement{
    text-align: center;
    font-size: var(--font18);
    font-weight: 700;
    line-height: 1.5em;
    padding: 0 0 4%;
}

#top .day_venue{
    display: flex;
    width: 90%;
    margin: 1% auto 2%;
}
#top .day_venue .day{
    width: 50%;
    padding: 0 1%;
}
#top .day_venue .venue{
    width: 50%;
    padding: 0 1%;
}


@media screen and (max-width: 768px) {
    #top .copy_statement{
        padding: 0 0 7%;
    }
    #top .day_venue{
        display:block;
        width: 86%;
        margin:7% auto 0;
    }
    #top .day_venue .day{
        width: 100%;
        padding:1% 0 0;
    }
    #top .day_venue .venue{
        width: 100%;
        padding:1% 0 4%;
    }
}

#top .button{
    color: #FFFFFF;
}
#top .main{
    position: relative;
    z-index: 1;
}
#top .mainWp{
    max-width: 1920px;
    margin: 0% auto 0;
}
#top h3{
    width: 52%;
    margin: 0% auto 0;
}
#top .sub_event{
    position: relative;
    width: 100%;
    margin: 0% auto 0;
    padding: 3% 0 0;
    aspect-ratio: 3600/1456;
    background-image: url(../images/top/frame01.png);
    background-repeat: no-repeat;
    background-position: left top;
    background-size: 100% auto;
    z-index: 2;
}
#top .copy{
    display: block;
    margin: 0 auto;
    width: 90%;
    padding: 1% 0;
    font-size: var(--font18);
    font-weight: 700;
    color: #444444;
    text-align: center;
}
#top .sub_event .event_wp{
    width: 90%;
    padding: 3.5% 0 0;
    margin: 0% auto 0;
    display: flex;
    justify-content: space-between;
}
#top .sub_event .event_wp .event_area{
    width: 59%;
    padding: 0 0 2%;
}
#top .sub_event .event_wp .mitsukeru{
    width: 38%;
     padding: 0 0 2% 3%;
    margin-top: -2%;
}
main{
    width: 50%;
    margin: 0 auto 5%;
}
@media screen and (max-width: 768px) {
    #top .sub_event .event_wp{
        padding: 4.5% 0 0;
        margin: 0% auto 0;
    }
    #top h3{
        width: 80%;
        margin:0% auto 0;
    }
    #top .copy{
        margin: 0 auto;
        width: 96%;
        padding: 1% 0;
    }
    #top .sub_event{
        width: 96%;
        margin: 0% auto 0;
        padding: 2% 0 5%;
        aspect-ratio: 3600/1456;
        z-index: 2;
    }
    main{
        width: 86vw;
        margin: 2.0vw auto 10vw;
    }
}

.sub_event_button{
    position: relative;
    text-align: center;
    display: block;
    margin: -4% auto 4%;
    z-index: 3;
}
#top .contents{
    max-width: 1920px;
    margin: 0 auto;
    padding: 0 0 0;
}
#top .contents .button{
    position: relative;
    text-align: center;
    display: block;
    margin: 0 auto;
    z-index: 3;
}

#top .mainWp{
    width: 82%;
    margin: 0% auto 2%;
}

@media screen and (max-width: 768px) {
    .sub_event_button{
        margin: -2vw auto 2vw;
    }
    #top .contents .button{
        line-height: 1.0em;
    }
    #top .contents .button p{
        padding-top: 0.0em;
    }
    #top .mainWp{
        width: 90vw;
        margin: 5vw auto 0;
    }

}




/****会場***/
#top .floor_map{
    width: 100%;
    border: 4px solid #00b2b1;
    background-color: #e1f8f8;
    border-radius: 20px;
    padding:0 4% 3%;
    margin: 4% 0 5%;
}
#top .floor_map h2{
    width: 35%;
    margin: 4% auto 0%;
}
#top .floor_map .map{
    width: 90%;
    margin: 0 auto;
}
@media screen and (max-width: 768px) {
    #top .floor_map{
        width: 100%;
        border: 3px solid #00b2b1;
        border-radius: 20px;
        padding: 1% 4% 5%;
        margin:1% 0 0;
    }
    #top .floor_map h2{
        width: 48%;
        margin: 4% auto 4%;
    }
    #top .floor_map .map{
        width: 90%;
        margin: 0 auto;
    }
}
/****END会場***/





/***********アクセス**********/

#top .access{
    width: 100%;
    border: 4px solid #00b2b1;
    background-color: #e1f8f8;
    border-radius: 20px;
    padding: 1% 4% 5%;
    margin:7% 0 0;
}
#top .access h2{
    width: 32%;
    margin: 4% auto 4%;
}
#top .access .access_map {
    width: 65%;
    margin: 0 auto;
}



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

    #top .access h2{
        width: 45%;
        margin: 4% auto 4%;
    }
    #top .access{
        width: 100%;
        border: 3px solid #00b2b1;
        border-radius: 20px;
        padding: 1% 4% 5%;
        margin-bottom: 0;
    }
    #top .access .access_map {
        width: 90%;
        margin: 0 auto;
    }
    
}

/*******ボタン*******/
#top .access a.std_btn1 {
    width: 60%;
    margin: 1.5% auto 1%;
    cursor: pointer;
    display: block;
    text-align: center;
    padding: 0.9em 0 0.65em 0;
    border-radius: 16px;
    color: #009D9C;
    font-weight: 700;
    font-size: var(--font20);
    line-height: 1.0em;
    background: #ffffff;
    box-shadow: 0 3px 0 #666666 ,0 5px 0 rgba(0,0,0,.2);
    transition: color .3s, background .3s, box-shadow .3s, transform 0.3s;
    border: 3px solid #00b2b1;
}
#top .access a.std_btn1:hover {
    color: #009D9C;
    background-color: #ffffff;
    box-shadow: 0 1px 0 #999999 , 0 2px 0 rgba(0,0,0,.1);
    transform: translateY(3px);
}
#top .access a.std_btn1:active {
    color: #009D9C;
    background-color: #008ecf;
    box-shadow: 0 1px 0 #0076ac , 0 2px 0 rgba(0,0,0,.2);
    transform: translateY(4px);
    transition-duration: .3s;
}
@media screen and (max-width:  767px) {
   #top .access a.std_btn1 {
    min-width: 90%;
     padding: 0.6em 0.8em;
    }
}

/***********END アクセス*********/






/*************bus*************/

#top .bus{
    width: 100%;
    border: 4px solid #00b2b1;
    background-color: #e1f8f8;
    border-radius: 20px;
    padding: 1% 4% 5%;
    margin:7% 0 12%;
}
#top .bus h2{
    width: 48%;
    margin: 4% auto 3%;
}
@media screen and (max-width:  767px) {
    #top .bus h2{
        width: 90%;
        margin: 0 auto;
    }
}
#top .bus .bus_txt{
    width: 90%;
    margin: 0 auto 1.5%;
}
/*******ボタン*******/
#top .bus a.std_btn {
    width: 68%;
    margin: 1.5% auto 1%;
    cursor: pointer;
    display: block;
    text-align: center;
    padding: 0.9em 0 0.65em 0;
    border-radius: 16px;
    color: #454545;
    font-size: var(--font20);font-weight: 700;
    line-height: 1.0em;
    background: #ffffff;
    box-shadow: 0 3px 0 #666666 ,0 5px 0 rgba(0,0,0,.2);
    transition: color .3s, background .3s, box-shadow .3s, transform 0.3s;
    border: 3px solid #767676;
}
#top .bus a.std_btn:hover {
    color: #333333;
    background-color: #ffffff;
    box-shadow: 0 1px 0 #999999 , 0 2px 0 rgba(0,0,0,.1);
    transform: translateY(3px);
}
#top .bus a.std_btn:active {
    background-color: #ffffff;
    box-shadow: 0 1px 0 #999999 , 0 2px 0 rgba(0,0,0,.2);
    transform: translateY(4px);
    transition-duration: .3s;
}
#top .bus a.std_btn::before {
    content: "";
    display: inline-block;
    width: 108px;
    height: 41px;
    padding: 0 0 0;
    line-height: 0;
    margin-top: -5px;
    margin-right: -30px;
    margin-bottom: -2px;
    background-image: url("../images/top/bus_icon2.png");
    background-size: 67%;
    vertical-align: middle;
    background-repeat: no-repeat;
    background-position: 0% center;
}

@media screen and (max-width:  767px) {
   #top .bus a.std_btn{
    min-width: 90%;
     padding: 0.6em 1.8em;
    }
    #top .bus a.std_btn{
        font-size: 4.2vw;
        line-height: 1.2em;
    }
}

/**************END bus*************/







/****************MICE*************/
#top .mice{
    width: 100%;
    border: 4px solid #FFA3BC;
    border-radius: 20px;
    padding: 5% 4% 4%;
    margin: 7% 0 15%;
    margin-bottom: 0;
    background-image: url(../images/wakuwaku/back.png);
    background-repeat: repeat;
    background-size: 100% auto;
}

#top .mice h2{
    width: 60%;
    margin: 0 auto 3%;
}
@media screen and (max-width:  767px) {
    #top .mice h2{
        width: 90%;
        margin: 0 auto;
    }
}



/*******ボタン*******/
#top .mice a.std_btn1 {
    width: 68%;
    margin: 1.5% auto 1%;
    cursor: pointer;
    display: block;
    text-align: center;
    padding: 0.9em 0 0.65em 0;
    border-radius: 16px;
    color: #ee4895;
    font-weight: 700;
    font-size: var(--font22);
    line-height: 1.0em;
    background: #ffffff;
    box-shadow: 0 3px 0 #666666 ,0 5px 0 rgba(0,0,0,.2);
    transition: color .3s, background .3s, box-shadow .3s, transform 0.3s;
    border: 3px solid #ee4895;
}
#top .mice a.std_btn1:hover {
    color: #ee4895;
    background-color: #ffffff;
    box-shadow: 0 1px 0 #999999 , 0 2px 0 rgba(0,0,0,.1);
    transform: translateY(3px);
}
#top .mice a.std_btn1:active {
    background-color: #ffffff;
    box-shadow: 0 1px 0 #999999 , 0 2px 0 rgba(0,0,0,.2);
    transform: translateY(4px);
    transition-duration: .3s;
}


/*******ボタン*******/
#top .mice a.std_btn2 {
    width: 68%;
    margin: 1.5% auto 1%;
    cursor: pointer;
    display: block;
    text-align: center;
    padding: 0.9em 0 0.65em 0;
    border-radius: 16px;
    color: #454545;
    font-size: var(--font20);font-weight: 700;
    line-height: 1.0em;
    background: #ffffff;
    box-shadow: 0 3px 0 #666666 ,0 5px 0 rgba(0,0,0,.2);
    transition: color .3s, background .3s, box-shadow .3s, transform 0.3s;
    border: 3px solid #767676;
}
#top .mice a.std_btn2:hover {
    color: #333333;
    background-color: #ffffff;
    box-shadow: 0 1px 0 #999999 , 0 2px 0 rgba(0,0,0,.1);
    transform: translateY(3px);
}
#top .mice a.std_btn2:active {
    background-color: #ffffff;
    box-shadow: 0 1px 0 #999999 , 0 2px 0 rgba(0,0,0,.2);
    transform: translateY(4px);
    transition-duration: .3s;
}
#top .mice a.std_btn2::before {
    content: "";
    display: inline-block;
    width: 90px;
    height: 30px;
    padding: 0 0 0;
    line-height: 0;
    margin-top: -0%;
    margin-right: -15px;
    margin-bottom: 1px;
    background-image: url("../images/top/bus_icon.png");
    background-size: 67%;
    vertical-align: middle;
    background-repeat: no-repeat;
    background-position: 0% center;
}

#top .mice_txt{
    width: 72%;
    font-size: var(--font18);
    line-height: 1.6em;
    font-weight: 700;
    margin: 3% auto 3%;
    font-weight: 700;
}

@media screen and (max-width:  767px) {
   #top .mice a.std_btn1,
    #top .mice a.std_btn2{
    min-width: 90%;
     padding: 0.6em 1.8em;
    }
    #top .mice a.std_btn1,
    #top .mice a.std_btn2{
        font-size: 4.2vw;
        line-height: 1.2em;
    }
}


/*************END MICE アクセス************/




/****************同時開催*****************/
#top .concurrent{
        border: 3px solid #a1a1a1;
    }
#top .concurrent h2{
    width: 75%;
    margin: 4% auto 1%;
}
#top .concurrent .concurrent_img {
    width: 90%;
    margin: 0 auto;
}

#top .concurrent h2{
    width: 75%;
    margin: 4% auto 1%;
}
#top .concurrent{
    width: 100%;
    text-align: center;
    border: 4px solid #f487ba;
    background-color: #ffe1ef;
    border-radius: 20px;
    padding: 1% 4% 4%;
    margin: 7% 0 0;
}
#top .concurrent h2{
    width: 80%;
}
#top .concurrent .wrap{
    width: 100%;
    display: flex;
    justify-content: space-between;
}
#top .concurrent .wrap .held01{
    width: 43.8%;
    line-height: 0;
}
#top .concurrent .wrap .held02{
    width: 53%;
    line-height: 0;
}
#top .concurrent .held03,
#top .concurrent .held04{
    margin: 1% 0 0;
}
#top .concurrent .held01:hover,
#top .concurrent .held03:hover,
#top .concurrent .held04:hover{
     border: 0.5px solid #0076ac;
     border-radius: 10px; 
     line-height: 0;
    opacity: 80%;
}

#top .concurrent .button {
    width: 19em;
    text-align: center;
    font-size: var(--font20);
    color: #ffffff;
    padding: 0.7em 1.0em 0.6em 1.5em;
    background: #c09b00;
    box-shadow: 0 5px 0 #856b00;
    margin-left: 10px;
}
#top .concurrent .button:hover {
    transform: translate(0, 3px);
    background-color: #c09b00;
    box-shadow: 0 2px 0 #856b00;
    color: #FFFFFF;
    transition: all 0.5s 0s ease;
    -webkit-transition: all 0.5s 0.0s ease;
    -webkit-box-shadow: 0 2px 0 #856b00;
}
#top .concurrent .button .btn_balloon {
    position: absolute;
    display: inline-block;
    bottom: 0.8em;
    top: -1.0em;
    left: -1.5em;
    width: 4em;
    height: 4em;
    font-family: "Noto Sans Japanese";
    line-height: 3.6em;
    text-align: center;
    color: #c09b00;
    font-weight: bold;
    background: #fff;
    border: 3px solid #c09b00;
    border-radius: 50%;
    box-sizing: border-box;
    transform: rotate(-20deg);
}
#top .concurrent  .button {
    position: relative;
    text-align: center;
    display: block;
    margin: 0 auto;
    z-index: 3;
}


@media screen and (max-width:  767px) {
    #top .concurrent .button {
     width: 90%;
    }
    #top .concurrent h2{
        width: 92%;
        margin: 6% auto 0%;
    }
    #top .concurrent{
        width: 100%;
        padding: 1% 4% 8%;
        margin: 7% 0 5%;
    }
        #top .concurrent .concurrent_map {
        width: 96%;
        margin:3% auto 6%;
    }
}
/***************END 同時開催**************/


/***************あいちでんちパーク**************/
#top .aich_park{
    border: 3px solid #a1a1a1;
    padding: 4% 7% 4%;
    margin: 7% 0 15%;
    line-height: 0;
    border: 4px solid #ff9000;
    background-color: #ffde00;
    border-radius: 20px;
    overflow: hidden;
}

@media screen and (max-width:  767px) {
    #top .aich_park{
        margin: 0 0 15%;
    }
}
/***************END あいちでんちパーク**************/





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