@charset "utf-8";
@import url(https://fonts.googleapis.com/earlyaccess/notosansjp.css);
@-ms-viewport{width: device-width;}

/*--------------------
　　WFPウォーク・ザ・ワールド CSS
--------------------*/

/*   共通CSS   */
.f15{
	font-size: 15px;
}



/*--------------------
　　mv
--------------------*/
.mv{
    background-color: rgb(225,239,253);
    -webkit-animation: fadeIn 1.5s ease 0s 1 normal;
    animation: fadeIn 1.5s ease 0s 1 normal;
}
.mv img.pc{
    max-width: 1440px;
    /*max-width: 1122px;*/
    margin: 0 auto;
}

@keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}
@-webkit-keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

/*--------------------
　　place
--------------------*/
.place{
    padding: 25px 40px 50px 40px;
	border-bottom: solid 1px #ccc;
}
.place h2{
    text-align: center;
    font-size: 26px;
    font-weight: 700;
     margin-bottom: 20px;
}
.place p{
    text-align: center;
}

@media screen and (max-width:767px){
    .place{
        padding: 20px 20px 20px 20px;
        
    }
    .place h2{
    font-size: 16px;
    margin-bottom: 15px;
    line-height: 1.2;
    }
    .place p{
    font-size: 12px;
    }
}

.place .place_link{
    display: flex;
    justify-content: space-between;
    max-width: 1122px;
    margin: 0 auto 30px auto;
    line-height: 1.2;
}
.place .place_link a{
    display: inline-block;
    width: 32%;
    border-radius:10px;
    padding: 12px 10px;
    box-sizing: border-box;
    text-align: center;
    box-shadow: 3px 3px 3px #DDD;
}


@media screen and (max-width:767px){
    .place .place_link{
        flex-direction: column;
        margin: 0 auto 0 auto;
    }
    .place .place_link a{
        display: block;
        width: 100%;
        padding: 8px;
        border-radius:5px;
        margin-bottom: 15px;
    }
}
.place .place_link a:hover{
    text-decoration: none;
    opacity: 0.8;
}
.place_link a:nth-child(1){
    background-color:rgb(0,110,202);
}
.place_link a:nth-child(2){
    background-color: rgb(236,108,0);
}
.place_link a:nth-child(3){
    background-color: rgb(188,53,104);
}
.place_link a h3{
    color: #fff;
    font-size: 13px;
    margin-bottom: 10px;
}
.place_link a .place_name{
    font-weight: 700;
    font-size: 26px;
    color: #fff;
    display: block;
    letter-spacing:2px;
    margin-bottom: 10px;
}
.place_link a .date{
    font-size: 18px;
    color: #fff;
    display: block;
    letter-spacing:2px;
}

/*タブレット対応*/
@media screen and (max-width:850px){
   .place_link a .place_name{
    font-size: 22px;
    }
    .place_link a .date{
    font-size: 14px;
    }
}

@media screen and (max-width:767px){
    .place_link a h3{
        font-size: 14px;
        margin-bottom: 5px;
    }
    .place_link a .place_name{
        font-size: 20px;
        margin-bottom: 5px;
    }
    .place_link a .date{
        font-size: 14px;
    }
}

/*協賛・自主開催はこちら*/
.sponsor_link{
    display: flex;
    justify-content: center;
    margin-top: 20px;
}
.sponsor_link a/*.sponsor_link > span*/{
    display: inline-block;
    width: 32%;
    max-width: 364px;
    border: solid 1px rgb(10,110,180);
    line-height: 1;
    padding: 15px 10px;
    box-sizing: border-box;
    text-align: center;
    border-radius: 24px;
    font-size: 18px;
    box-shadow: 3px 3px 3px #DDD;
    margin: 0 20px;
}

/*.sponsor_link a{
    padding-top: 25px;
}*/
.sponsor_link a:hover{
    text-decoration: none;
    background-color: rgb(242,249,252);
}
.sponsor_link a i/*.sponsor_link span i*/{
    margin-right: 5px;
}

.sponsor_link span span.kome{
    font-size: 12px;
    line-height: 1.5;
}

@media screen and (max-width:767px){
    .sponsor_link{
        flex-direction: column;
        margin-top: 0;
    }
    .sponsor_link a/*,.sponsor_link > span*/{
        max-width: 100%;
        width: 100%;
        padding: 15px 10px;
        font-size: 14px;
        margin:0;
    }
    .sponsor_link a:first-child{
        margin-bottom: 10px;
    }
}

/*--------------------
　　news
--------------------*/
.font-18{
	font-size: 18px;
}
.font-20{
	font-size: 20px;
}
@media screen and (max-width:767px){
    .font-18{
	font-size: 16px;
}
	.font-20{
	font-size: 18px;
}
}
.font-red{
	color:#FF0000;
}
.news{
    background-color: rgba(255,255,255,1.00);
    padding: 60px 40px;
    text-align: center;
}
.news-inner{
    max-width: 1000px;
    display: flex;
    margin: 0 auto;
}

@media screen and (max-width:767px){
    .news{
    padding: 40px 20px;
    }
    .news-inner{
    display: block;
    }
}

.news h2{
    font-size: 40px;
    font-weight: 700;
    color: rgb(10,110,180);
    line-height: 1;
    width: 20%;
    text-align: left;
}
@media screen and (max-width:767px){
    .news h2{
    font-size: 22px;
    text-align: center;
    margin-bottom: 20px; 
        width: 100%;
    }
}

.news-list{
    width: 80%;
    text-align: center;
}
@media screen and (max-width:767px){
    .news-list{
    width: 100%;
    }
}
.news-list li{
    border-bottom: solid 1px #ccc;
    padding: 15px 5px 15px 5px;
    display: flex;
    position: relative;
    text-align: left;
    
}
.news-list li:first-child{
    border-bottom: solid 1px #ccc;
    padding: 0 5px 15px 5px;
}
.news-list li:last-child{
    border: none;
}
@media screen and (max-width:767px){
    .news-list li{
    display: block;
    font-size: 14px;
    padding: 15px 0 15px;
    }
}
.news-list li span.news-date{
    display: inline-block;
    flex-basis: 110px;
    white-space: nowrap;
    flex-shrink: 0;
}
.news-list li span.news-place{
    display: inline-block;
    flex-basis: 90px;
    white-space: nowrap;
    flex-shrink: 0;
}
.news-list li span.news-txt{
    display: inline-block;
    flex-basis: auto;
}
@media screen and (max-width:767px){
    .news-list li span.news-date{
    flex-basis: none;
    width: 80px;
    }
    .news-list li span.news-place{
    flex-basis: none;
    width: 80px;
    }
    .news-list li span.news-txt{
    display: block;
    flex-basis: none;
    width: 100%;
        margin-top: 5px;
    }
}
.news-list li span.icon_yokohama{
    display: inline-block;
    font-size: 14px;
    line-height: 1;
    color: #fff;
    text-align: center;
    width: 80px;
    height: 18px;
    padding: 2px;
    border-radius: 9px;
    background-color:rgb(0,110,202);
    margin:5px auto 0 auto;  
}
.news-list li span.icon_osaka{
    display: inline-block;
    font-size: 14px;
    line-height: 1;
    color: #fff;
    text-align: center;
    width: 80px;
    height: 18px;
    padding: 2px;
    border-radius: 9px;
    background-color: rgb(236,108,0);
    margin:5px auto 0 auto;  
}
.news-list li span.icon_nagoya{
    display: inline-block;
    font-size: 14px;
    line-height: 1;
    color: #fff;
    text-align: center;
    width: 80px;
    height: 18px;
    padding: 2px;
    border-radius: 9px;
    background-color: rgb(188,53,104);
    margin:5px auto 0 auto;  
}

@media screen and (max-width:767px){
    .news-list li span.icon_yokohama,
    .news-list li span.icon_osaka,
    .news-list li span.icon_nagoya{
    font-size: 12px;
    width: 60px;
    }
}
.news-list li i{
    color: #808080;
    margin-left: 5px;
}
/*news-btn*/
.news-btn{
    cursor:pointer;
    display: inline-block;
    width: 300px;
    border: solid 1px rgb(10,110,180);
    background-color: rgb(10,110,180);
    color: #fff;
    line-height: 1;
    padding: 15px 10px;
    box-sizing: border-box;
    text-align: center;
    border-radius: 24px;
    font-size: 18px;
    box-shadow: 3px 3px 3px #DDD;
    position: relative;
    margin: 20px auto 0 auto; 
}
.news-btn:hover{
    background-color: rgb(10,110,180);
}
.news-btn:before{
    font-family: 'FontAwesome';
    content: "\f055";
    position: absolute;
    top: 50%;
    right: 15px;
    margin-top: -9px;
}

/*マイナスボタン*/
.news-btn.open:before{
  font-family: 'FontAwesome';
  content: "\f056";
}
.news-list-hidden{
    display: none;
}
@media screen and (max-width:767px){
    .news-btn{
    display:block;
    width: 100%;
    text-align: center;
    border-radius: 22px;
    font-size: 14px;
    }
    .news-btn:before{
    position: absolute;
    top: 50%;
    right: 15px;
    margin-top: -7px;
    }
}

/*--------------------
　　.about-contnts
--------------------*/
section.about-contnts{
    padding: 80px 40px;
    text-align: center;
    background-color: rgb(225,239,253);
}
.about-contnts-inner{
    max-width: 1000px;
    margin: 0 auto;
    text-align: left;
    display: flex;
    background: url("../img/bg_redcup_white.png") no-repeat;
    background-position: left bottom;
    background-size:22% auto;
}
.about-contnts-left{
     flex-basis:54%;
     padding-right: 70px;
     box-sizing: border-box;
}
.about-contnts-rght{
     flex-basis:46%;
     max-width: 460px;
}
@media screen and (max-width:767px){
    section.about-contnts{
        padding: 20px 20px 40px 20px;
    }
    .about-contnts-inner{
        display: block;
        padding-top: 20px;
        background-position: right top;
        background-size:35% auto;
    }
    .about-contnts-left{
        flex-basis:none;
        padding-right: 0; 
    }
    .about-contnts-rght{
        flex-basis:none;
        max-width: 100%; 
    }
}
.about-contnts-left h2{
     font-weight: 700;
    font-size: 22px;
    color: rgb(10,110,180);
    margin-bottom: 20px;
    line-height: 1.5;
}
.about-contnts-left p{
    margin-bottom: 30px;
    /*line-height: 2;*/
}
.about-contnts-right img{
    max-width: 460px;
}
@media screen and (max-width:767px){
    .about-contnts-left h2{
        font-size: 16px;
        margin-bottom: 15px;
    }
    .about-contnts-left p{
        font-size: 14px;
        margin-bottom: 15px;
        /*line-height: 1.7;*/
    }
    .about-contnts-left a.btn_blue{
        margin-bottom: 20px;
    }
    .about-contnts-left a.btn_tojitu{
        margin-bottom: 20px;
    }
}
/*共通ボタン_当日の様子　*/
a.btn_tojitu{
	display: block;
	max-width:13em;
	background-color: #38b6ff;
	color: #fff;
	line-height: 1;
	padding: 12px 10px;
	box-sizing: border-box;
	text-align: center;
	border-radius: 8px;
	box-shadow: 3px 3px 3px #DDD;
	font-size: 16px;
	font-weight: bold;
	position: relative;
	margin: 10px 0px;
	text-decoration: none;

}
a.btn_tojitu:hover{
    background-color: #38b6ff;
    text-decoration: none;
}
a.btn_tojitu i{margin-right:5px;}
@media screen and (max-width:767px){
    a.btn_tojitu{
        max-width:100%;
        font-size: 14px;
    }
}


/*共通ボタン_青*/
a.btn_blue{
    display: block;
    max-width:350px;
    border: solid 1px rgb(10,110,180); 
    background-color: rgb(10,110,180);
    color: #fff;
    line-height: 1;
    padding: 15px 10px;
    box-sizing: border-box;
    text-align: center;
    border-radius: 24px;
    font-size: 16px;
    box-shadow: 3px 3px 3px #DDD;
    position: relative;
}
a.btn_blue:hover{
    background-color: rgb(10,110,180);
    text-decoration: none;
}
a.btn_blue i{margin-right:5px;}
@media screen and (max-width:767px){
    a.btn_blue{
        max-width:100%;
        font-size: 14px;
    }
}

/*共通ボタン_赤*/ 
a.btn_red{
    display: block;
    max-width:350px;
    border: solid 1px rgba(228,33,19,1.00);
    background-color: rgba(228,33,19,1.00);
    color: #fff;
    line-height: 1;
    padding: 15px 10px;
    box-sizing: border-box;
    text-align: center;
    border-radius: 24px;
    font-size: 16px;
    box-shadow: 3px 3px 3px #DDD;
    position: relative;
}
a.btn_red:hover{
    background-color: rgba(228,33,19,1.00);
    text-decoration: none;
}
a.btn_red i{margin-right:5px;}
@media screen and (max-width:767px){
    a.btn_red{
        max-width:100%;
        font-size: 14px;
    }
}

/*--------------------
　　.past-contnts
--------------------*/
section.past-contnts{
    padding: 40px 40px 80px 40px;
    text-align: center;
    background-color: rgba(255,255,255,1.00);
    position: relative;
}
.past-contnts-inner{
    padding-top: 40px;
    max-width: 1000px;
    margin: 0 auto;
    text-align: left;
    display: flex;
    flex-direction: row-reverse;
    /*background: url("../img/bg_wfplogo_blue.png") no-repeat;
    background-position: right top;
    background-size:20% auto;*/
}
.past-contnts-left{
     flex-basis:54%;
     box-sizing: border-box;
}
.past-contnts-right{
    flex-basis:46%;
    padding-left: 70px;
    box-sizing: border-box;
}
@media screen and (max-width:767px){
    section.past-contnts{
        padding: 20px 20px 40px 20px;
    }
    .past-contnts-inner{
        display: block;
        padding-top: 20px;
        background-position: right top;
        background-size:35% auto;
    }
    .past-contnts-left{
        flex-basis:none;
        padding-right: 0; 
    }
    .past-contnts-right{
        flex-basis:none;
        max-width: 100%; 
        padding-left: 0;
        margin-bottom: 20px;
    }
}

.youtube {
     position: relative;
     padding-bottom: 56.25%; /*アスペクト比 16:9の場合の縦幅*/
     height: 0;
     overflow: hidden;
}
.youtube iframe {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
}
.past-contnts-left span{
    display: block;
    font-size: 14px;
    margin-top: 15px;
}
.past-contnts-right h2{
    font-weight: 700;
    font-size: 22px;
    color: rgb(10,110,180);
    margin-bottom: 20px;
    line-height: 1.5;
}
/*タブレット対応*/
@media screen and (max-width:990px){
    .past-contnts-right h2 br.pc{
        display: none;
    }
}
.past-contnts-right p{
    margin-bottom: 30px;
    /*line-height: 2;*/
}
.past-contnts-right span{
    display: block;
    font-size: 14px;
    margin-top: 15px;
}
@media screen and (max-width:767px){
    .past-contnts-right h2{
        font-size: 16px;
        margin-bottom: 15px;
    }
    .past-contnts-right p{
        font-size: 14px;
        margin-bottom: 15px;
        /*line-height: 1.7;*/
    }
    .past-contnts-left span,
    .past-contnts-right span{
        font-size: 12px;
        margin-bottom: 15px;
    }
}

/*--------------------
　　.others-contnts
--------------------*/
section.others-contnts{
    padding: 40px 40px 80px 40px;
    text-align: center;
    background-color: rgb(225,239,253);
    position: relative;
}
section.others-contnts h3{
    font-size: 22px;
    line-height: 1.5;
    text-align: center;
    border-bottom: solid 4px rgb(10,110,180);
    padding-bottom: 15px;
    margin-bottom: 40px;
    font-weight: bold;
    margin: auto;
	max-width: 1100px;
}

.others-contnts-inner{
    padding-top: 40px;
    max-width: 1000px;
    margin: 0 auto;
    text-align: left;
    display: flex;
    flex-direction: row-reverse;
}
.others-contnts-left{
     flex-basis:54%;
     box-sizing: border-box;
}
.others-contnts-right{
    flex-basis:46%;
    padding-left: 70px;
    box-sizing: border-box;
}
.others-contnts-left span{
    display: block;
    font-size: 14px;
    margin-top: 15px;
}
.others-contnts-right h2{
    font-weight: 700;
    font-size: 22px;
    color: rgb(10,110,180);
    margin-bottom: 30px;
    line-height: 1.5;
}
.others-contnts-right p{
    margin-bottom: 30px;
}
.others-contnts-right span{
    display: block;
    font-size: 14px;
    margin-top: 15px;
}
/*タブレット対応*/
@media screen and (max-width:990px){
    .others-contnts-right h2 br.pc{
        display: none;
    }
	.others-contnts-left{
     flex-basis:50%;
     box-sizing: border-box;
	}
	.others-contnts-right{
    flex-basis:50%;
    padding-left: 30px;
    box-sizing: border-box;
	}
}

@media screen and (max-width:767px){
	section.others-contnts{
        padding: 20px 20px 40px 20px;
    }
    .others-contnts-inner{
        display: block;
        padding-top: 20px;
        background-position: right top;
        background-size:35% auto;
    }
    .others-contnts-left{
        flex-basis:none;
        padding-right: 0; 
    }
    .others-contnts-right{
        flex-basis:none;
        max-width: 100%; 
        padding-left: 0;
        margin-bottom: 20px;
    }
    .others-contnts-right h2{
        font-size: 16px;
        margin-bottom: 15px;
    }
    .others-contnts-right p{
        font-size: 14px;
        margin-bottom: 15px;
        line-height: 1.7;
    }
    .others-contnts-left span,
    .others-contnts-right span{
        font-size: 12px;
        margin-bottom: 15px;
    }
	section.others-contnts h3{
    font-size: 16px;
    line-height: 1.5;
    text-align: center;
    border-bottom: solid 2px rgb(10,110,180);
    padding-bottom: 10px;
    margin-bottom: 30px;
    margin: auto;
}
}


/*--------------------
　　.onestep-contnts
--------------------*/
section.onestep-contnts{
    padding: 40px 40px 80px 40px;
    text-align: center;
    background-color: #fff;
}
@media screen and (max-width:767px){
	section.onestep-contnts{
    padding: 20px 20px 40px 20px;
	}
}
section.onestep-contnts h3{
    font-size: 22px;
    line-height: 1.5;
    text-align: center;
    border-bottom: solid 4px rgb(228,33,19);
    padding-bottom: 15px;
    margin-bottom: 40px;
    font-weight: 700;
    margin: auto;
	max-width: 1100px;
}

@media screen and (max-width:767px){
	section.onestep-contnts h3{
		font-size: 16px;
    	line-height: 1.5;
    	text-align: center;
    	border-bottom: solid 2px rgb(228,33,19);
    	padding-bottom: 10px;
    	margin-bottom: 20px;
	}
}

.onestep-contnts-inner{
    padding-top: 40px;
    max-width: 1000px;
    margin: 0 auto;
    text-align: left;
    display: flex;
}
@media screen and (max-width:767px){
	.onestep-contnts-inner{
    	padding-top: 0;
		display: block;
	}
}

.onestep-contnts-left{
     flex-basis:58%;
     box-sizing: border-box;
}
.onestep-contnts-right{
    flex-basis:42%;
    padding-left: 70px;
    box-sizing: border-box;
}
@media screen and (max-width:767px){
	.onestep-contnts-right{
		padding-left: 0;
		padding-top: 20px;
	}
}
.onestep-contnts-left h4{
	font-size: 22px;
	font-weight: 700;
	margin-bottom: 20px;
}
@media screen and (max-width:767px){
	.onestep-contnts-left h4{
    	font-size: 14px;
		margin-bottom: 10px;
	}
}
.onestep-contnts-left h4 span{
	color: rgb(228,33,19);
}

@media screen and (max-width:767px){
	.onestep-contnts-left p{
    	font-size: 14px;
	}
}
.onestep-contnts-left p:not(last-child){
	margin-bottom: 20px;
}
@media screen and (max-width:767px){
	.onestep-contnts-left p:not(last-child){
    	margin-bottom: 10px;
	}
}
.onestep-contnts-left p span{
	color: #F19089;
}

.onestep-contnts-right p{
	font-size: 14px;
	margin-top: 10px;
}
@media screen and (max-width:767px){
	.onestep-contnts-right{
		font-size: 12px;
		margin-top: 5px;
	}
}
.others-contnts-left span{
    display: block;
    font-size: 14px;
    margin-top: 15px;
}














.others-contnts-right h2{
    font-weight: 700;
    font-size: 22px;
    color: rgb(10,110,180);
    margin-bottom: 30px;
    line-height: 1.5;
}
.others-contnts-right p{
    margin-bottom: 30px;
    line-height: 2;
}
.others-contnts-right span{
    display: block;
    font-size: 14px;
    margin-top: 15px;
}
/*タブレット対応*/
@media screen and (max-width:990px){
    .others-contnts-right h2 br.pc{
        display: none;
    }
	.others-contnts-left{
     flex-basis:50%;
     box-sizing: border-box;
	}
	.others-contnts-right{
    flex-basis:50%;
    padding-left: 30px;
    box-sizing: border-box;
	}
}

@media screen and (max-width:767px){
	section.others-contnts{
        padding: 20px 20px 40px 20px;
    }
    .others-contnts-inner{
        display: block;
        padding-top: 20px;
        background-position: right top;
        background-size:35% auto;
    }
    .others-contnts-left{
        flex-basis:none;
        padding-right: 0; 
    }
    .others-contnts-right{
        flex-basis:none;
        max-width: 100%; 
        padding-left: 0;
        margin-bottom: 20px;
    }
    .others-contnts-right h2{
        font-size: 16px;
        margin-bottom: 15px;
    }
    .others-contnts-right p{
        font-size: 14px;
        margin-bottom: 15px;
        line-height: 1.7;
    }
    .others-contnts-left span,
    .others-contnts-right span{
        font-size: 12px;
        margin-bottom: 15px;
    }
	section.others-contnts h3{
    font-size: 16px;
    line-height: 1.5;
    text-align: center;
    border-bottom: solid 2px rgb(10,110,180);
    padding-bottom: 10px;
    margin-bottom: 30px;
    margin: auto;
}
}