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

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

.boot::after{
    /*background: radial-gradient(circle farthest-side, #e8437e, #e8437e 30%, transparent 30%, transparent);*/
    background-size: 10px;
    content: '';
    display: inline-block;
    height: 10px;
    width: 100%;
}


#event table,
#event tr,
#event th,
#event td{
    border: 0;
    font-weight: 400;
    font-size: var(--font18);
    vertical-align: top;    
}
th {
  position: relative;
  padding-right: 1em; /* 文字とコロンの間の余白 */
  text-align: left;   /* 左寄せ */
}

th::after {
  content: "：";
  position: absolute;
  right: 0;          /* セル右端に固定 */
}
#event table th{
    width: 15%;
    text-align: left;
}
#event table td{
    width: 85%;
    text-align: left;
}
#event table.type2 th{
    width: 25%;
    text-align: left;
}
#event table.type td{
    width: 75%;
    text-align: left;
}
#event .left_txt p{
    padding: 0.1em 1.0em 0.1em
}
#event .left_txt p.boot_blue{
    color: #00a0e9;
    padding: 0 0 0;
}
#event .left_txt p.boot_red{
    color: #e4007f;
    padding: 0 0 0;
}
#event .left_txt p.time{
    padding: 0.1em 0 0.1em;
    line-height: 1.3em;
}
#event .left_txt p.notes{
    font-size: var(--font14);
    padding: 0.1em 0 0.8em;
    line-height: 1.3em;
}
.imgArea{
    width: 100%;
    padding: 4% 3% 0;
}


#event header h1{
    width: 70%;
    margin: 1% auto 1%;
    padding: 0;
    line-height: 0;
}
#event .button .btn_balloon{
    font-size: var(--font16);
}
@media screen and (max-width: 768px) {
    #event header h1{
        width: 85%;
        margin: 2% auto 2%;
    }
    .copy_statement{
        font-size: 3.6vw;
    }
}

#event .day_venue{
    display: flex;
    width: 94%;
    margin: 3% auto 1%;
}
#event .day_venue .day{
    width: 50%;
    padding: 0 1%;
}
#event .day_venue .venue{
    width: 50%;
    padding: 0 1%;
}

#event .event_wp{
    padding: 0 1.56% 0;
}
#event .event_wp table td{
     font-size: var(--font16) !important;
}
@media screen and (max-width: 768px) {
    #event .day_venue{
        display:block;
        width: 90%;
        margin: 1.5% auto 1%;
    }
    #event .day_venue .day{
        width: 75%;
        padding: 1% 1%;
        margin: 0 auto;
    }
    #event .day_venue .venue{
        width: 100%;
        padding: 1% 1%;
    }

}


#event .mainWp{
    width: 96%;
    margin: 0 auto;
}
#event .sub_event{
    width: 92%;
    margin: 0 auto;
}
.event_menu ul{
    position: relative;
    width: 100%;
    padding: 0 2%;
    margin: 0 auto;
}
/***ナビゲーション***/
.event_menu ul{
    width: 90%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    z-index: 10001;
}
.event_menu ul li{
    width: 20%;
    padding: 0 0.3% 2%;
    line-height: 0;
    cursor: pointer;
}
@media screen and (max-width: 768px) {
    .event_menu ul{
        display: flex;
        flex-flow: wrap;
        justify-content: center;
    }
    .event_menu ul li{
        width: 20%;
        padding: 0 0.2% 1%;
        cursor: pointer;
    }
}
/***END　ナビゲーション***/




/****ワクワクワークショップ***/
#event .sub_event .wakuwaku h2{
    width: 100%;
    margin: 1% auto 0;
}
@media screen and (max-width: 768px) {
    #event .sub_event .wakuwaku h2{
        width: 94%;
        margin: 5% auto 0;
    }
}

#waku{
    position: absolute;
    top:51vw;
    left: 0;
}
.wakuwaku_copy{
    font-size: var(--font18);
    color: #444444;
    font-weight: 700;
    padding: 0 2% 1%;
    margin: -0.5% 0 0;
    text-align: center;
}

@media screen and (max-width: 767px) {
	#event .sub_event .wakuwaku{
		width: 100%;
		padding: 5% 2% 0;
	}
	#event .sub_event .wakuwaku h2{
		margin: 0% auto 0%;
		width : 96%;
	}
}

#event .sub_event .wakuwaku .exp{
	border: 4px solid #00a0e9;
	border-radius: 15px;
	background-color: #FFFFFF;
    font-size: var(--font14);
	padding: 0% 0%;
    list-style: none;
}

#event .sub_event .wakuwaku .exp a.mapbtn {
  display: inline-block;
  padding: 3px 8px 5px;
  margin: 0 0 0 4px;
  font-size: var(--font12);
  line-height: 1.0em;
  color: #fff;
  background-color: #e4007f;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.3s, transform 0.2s;
}

#event .sub_event .wakuwaku .exp a.mapbtn:hover {
  background-color: #e4007f;
  transform: translateY(2px);
}

#event .sub_event .wakuwaku .exp a.mapbtn:active {
  transform: translateY(0);
  background-color: #004a82;
}
#event .sub_event .wakuwaku .exp a.mapbtn::before {
  content: "→ ";
  font-weight: bold;
}

#event .sub_event .wakuwaku .exp ul{
		padding:1% 0%;
}
#event .sub_event .wakuwaku .exp li{
    margin: 0 0;
    line-height: 1.4em;
}
#event .sub_event .wakuwaku .exp li.blue{
    margin: 0.2m 0 0;
}
#event .sub_event .wakuwaku .exp .notes{
    font-size: var(--font14);
    margin: 0 0 1.0em 1.0em;
}
#event .sub_event .wakuwaku .exp li::before{
    list-style: none;
    margin: 0 0 0 1.5em;
    line-height: 1.0em;
}
#event .sub_event .wakuwaku .exp li.green::before{
    content: "●";
    color: #00a73c;
}
#event .sub_event .wakuwaku .exp li.pink::before{
    content: "●";
    color: #e4007f;
}
#event .sub_event .wakuwaku .exp li.blue::before{
    content: "●";
    color: #00a0e9;
}
#event .sub_event .wakuwaku .exp li::before{
    content: "●";
    color: #000000;
}
#event .sub_event .wakuwaku .exp h3{
	background-color: #00a0e9;
	padding: 0.3em 0 0.3em;
    margin: 0;
	text-align: center;
	font-size: var(--font20);
	font-weight: 900;
	line-height: 1.0em;
	color: #FFFFFF;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
}




@media screen and (max-width: 767px) {
    #event .sub_event .wakuwaku .exp{
        border: 2px solid #00a0e9;
    }
	#event .sub_event .wakuwaku .exp{
		border-radius: 4.0vw;
		line-height: 1.0em;
		padding: 0 0 3%;
	}
    #event .sub_event .wakuwaku .exp ul{
        font-size: 3.2vw;
        padding: 0.5em;
    }
    #event .sub_event .wakuwaku .exp li::before{
        margin: 0 0 0 0;
    }
	#event .sub_event .wakuwaku .exp h3{
		margin: 0;
        padding: 1% 2%;
		font-size: 4.0vw;
		text-align: center;
		font-weight: 900;
		line-height: 1.1em;
		color: #FFFFFF;
		border-top-left-radius:3.0vw;
		border-top-right-radius:3.0vw;
	}
    a.std_btn {
        margin: 3% auto 0;
    }
}



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


#event .boot p{
    font-size: var(--font18);
    padding: 0.5em 1.0em 0.5em;
}
@media screen and (max-width: 768px) {
    #event .boot p{
        padding: 0.5em 0.5em 0.5em;
    }
}
#event .boot .left_txt{
    padding: 0.5em 1.0em 0.5em;
}
@media screen and (max-width: 768px) {
    #event .wakuwaku{
        border: 3px solid #FFA3BC;
    }
    #event .wakuwaku .leftArea{
        width: 100%;
        float:none;
    }
    #event .wakuwaku .rightArea{
        width: 100%;
        float:none;
    }
}
  

#mitsukeru,
#taiken,
#floor_map,
#access,
#concurrent{
    height: 8.0vw
}


.boot_wrap{
    margin: 5% 0 0;
}
.boot_box{
    width: 100%;
    display: flex;
    justify-content: space-between;
}
#event .boot{
    width: 48.5%;
 border: 2px solid #f7b1cf;
 background-color: #FFFFFF;
 border-radius:20px;
 margin: 0 0 5%;
 overflow: hidden;
}
#event .boot h3{
    width: 100%;
    padding: 10px 0 0;
    line-height: 0;
    margin: -5px 0 0;
    padding: 10px 0 2px;
    background-color: #f9c8dd;
}
#event .boot h3 img{
    width: 90%;
    margin: 0 auto;
}
/****END ワクワクワークショップ***/


@media screen and (max-width: 768px) {
     #event .boot_box{
        display:block;
    }
    #event .boot{
        width: 100%;
    }
}





/****ミツケル***/
#event .mitsukeru{
    width: 100%;
    border: 4px solid #9ac715;
    background-color: #dcf4ff;
    border-radius: 20px;
    padding: 1% 2% 1%;
    margin-bottom: 0;
    position: relative;
     z-index: 1;

    border-radius: 20px;
    padding: 1% 4% 5%;
    margin-top: 0%;
    margin-bottom: 0;
    background-image: url(../images/mitsukeru/back.png);
    background-repeat: repeat;
    background-size: 100% auto;
}


 #event .mitsukeru h2{
        width: 80%;
        margin: 1% auto 2%;
        position: relative;
        z-index: 2;
}
@media screen and (max-width: 768px) {
    #event  .sub_event .mitsukeru{
        border: 3px solid #00a3e9;
    }
    
     #event  .sub_event .mitsukeru h2{
        width: 90%;
        margin: 5% auto 0%;
    }
}

#event .mitsukeru .mitsukeru_boot {
    width: 94%;
    margin: 0 auto;
    padding: 0 0 1%;
   /*display: flex;
    justify-content: space-between;*/
}
#event .sub_event  .txtArea h3{
    width: 90%;
    margin: 8% 0 3%;
}
#event .sub_event .mitsukeru .txtArea{
    width:40%;
}
#event .sub_event .mitsukeru .imgArea{
    z-index: 1;
    width:100%;
    padding:0 0 0;
    margin: -1% auto 0;
}
@media screen and (max-width: 768px) {
    #event .mitsukeru .mitsukeru_boot {
        display:block;
    }
    #event .sub_event  .txtArea h3{
        width: 100%;
        margin: 0;
    }
    #event .sub_event .mitsukeru .txtArea{
        width:100%;
    }
    #event .sub_event .mitsukeru .imgArea{
        width: 95%;
        padding:0 0 0;
        margin: 0% auto;
    }
}
/****ENDミツケル***/




/****タイケン***/
#event .taiken{
    width: 100%;
    border: 4px solid #f8b600;
   border-radius: 20px;
    padding: 1% 2% 1%;
    margin-bottom: 0;
    position: relative;
    z-index: 1;

    border-radius: 20px;
    padding: 1% 4% 5%;
    margin-top: 0%;
    margin-bottom: 0;
    background-image: url(../images/taiken/back.png);
    background-repeat: repeat;
    background-size: 100% auto;
}
#event .sub_event .taiken h2{
    width: 80%;
    margin: 1% auto 0;
}
#event .taiken p.copy{
    font-size: var(font18);
    color: #444444;
    font-weight: 700;
    padding: 0 2% 1%;
    margin: -0.5% 0 0;
    text-align:left;
}
@media screen and (max-width: 768px) {
    #event .taiken{
        border: 3px solid #f8b600;
    }
    #event .sub_event .taiken h2{
        width: 94%;
        margin: 5% auto 0;
    }
}

#event .taiken .taiken_boot{
    width: 94%;
    display: flex;
    justify-content: space-between;
    margin: 0 auto;
}
#event .sub_event .taiken .txtArea{
    width: 44%;
    font-size: var(--font18);
}
#event .sub_event .taiken .imgArea{
    width: 50%;
    padding: 2% 0 0;
}
@media screen and (max-width: 768px) {
    #event .sub_event .taiken .txtArea h3{
        width: 75%;
}
    #event .sub_event .taiken .txtArea{
        width: 100%;
    }
    #event .sub_event .taiken .imgArea{
        width: 100%;
        padding: 3% 0 0;
    }
    #event .taiken .taiken_boot{
        display:block;
    }
}
/****END タイケン***/






/*******通常ボタン*******/

a.std_btn:hover {
    color: #FFFFFF;
    background-color: #008ecf;
    box-shadow: 0 1px 0 #0076ac , 0 2px 0 rgba(0,0,0,.2);
    transform: translateY(3px);
}
a.std_btn:active {
    color: #FFFFFF;
    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) {
    a.std_btn {
    min-width: 90%;
     padding: 0.6em 1.8em;
    }
}
    
/*******END通常ボタン*******/

/*******同時開催ボタン*******/
#event .concurrent a.std_btn{
    line-height: 1.2em;
    background-color: #c09b00;
    box-shadow: 0 3px 0 #8c7100,0 5px 0 rgba(0,0,0,.2);
    transition: color .3s, background .3s, box-shadow .3s, transform 0.3s;
}
#event a.std_btn {
}
/*******END同時開催ボタン*******/


a.std_btn.sanka::before {
    content: "";
    display: inline-block;
    width: 40px;
    height: 40px;
    padding: 0 0 0;
    line-height: 0;
    margin-top: -0%;
    margin-right: 0px;
    margin-bottom: 1px;
    background-image: url(../images/mitsukeru/sanka_icon.png);
    background-size: 86%;
    vertical-align: middle;
    background-repeat: no-repeat;
    background-position: 0% center;
}
.sanka_notes{
    text-align: center;
    font-size: var(--font18);
    line-height: 1.0em;
    color: #E00003;
    padding: 0.3em 0 0;
}
@media screen and (max-width:  767px) {
    a.std_btn.sanka {
        width: 100%;
        padding: 0.2em 0;
    }
    .sanka_notes{
        font-size: 3.0vw;
        padding: 1.0em 0 0;
    }
}




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