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

#hokuo_20200215open{
}


#hokuo_20200215open .main_image{
	width: 100vw;
	height:600px;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    overflow:hidden;
}

#hokuo_20200215open .main_image img{
	width:100%;
	height:100%;
	object-fit:cover;
}


#hokuo_20200215open .detail {
	background:#40172b;
	width:100%;
	margin:0 auto;
	padding-bottom:0;
	position:relative;
}

#hokuo_20200215open .detail .ep_box{
	width:100%;
	margin:-500px auto 50px auto;
}

#hokuo_20200215open .detail .ep_box dt{
	color:#fff;
	font-weight:bold;
	width:80%;
	margin:50px auto 0 auto;
}

#hokuo_20200215open .detail .ep_box dt img{
	width:100%;
	margin-top:30px;
}

#hokuo_20200215open .detail .ep_box dt p{
}
#hokuo_20200215open .detail .ep_box dt p strong{
	color:inherit;
	font-size:130%;
}
#hokuo_20200215open .detail .event_box{
    margin:0 0 50px 0;
}

#hokuo_20200215open .detail .event_box ul{
    display:flex;
}

#hokuo_20200215open .detail .event_box ul li{
}

#hokuo_20200215open .detail .event_box ul li span{
	width:95%;
	font-size:60%;
	font-weight:bold;
	line-height:1.3em;
	padding:0.5em 0;
	margin:0.5em auto;
	text-align:center;
	display:block;
	background:#dcd823;
	border-radius:20px;
}

#hokuo_20200215open .detail .campaign_box{
	width:90%;
	margin:0 auto 50px auto;
	background:#fff;
	padding:20px;
	box-sizing:border-box;
	box-shadow:5px 5px #000000;
	border:6px solid #e9532c;
}
#hokuo_20200215open .detail .campaign_box h5{
	text-align:center;
	border-bottom:2px dashed #e9532c;
}
#hokuo_20200215open .detail .campaign_box h5 img{
}


#hokuo_20200215open .detail .campaign_box dd{
	display:flex;
	justify-content:space-between;
}
#hokuo_20200215open .detail .campaign_box dd div{
	width:48%;
}


#hokuo_20200215open .detail .seminer_box{
	width:90%;
	margin:30px auto 0 auto;
}

#hokuo_20200215open .detail .seminer_box ul{
	display:flex;
	justify-content:space-between;
	flex-wrap:wrap;
}

#hokuo_20200215open .detail .seminer_box ul li{
	width:30%;
	padding:10px;
	margin:0 0 30px 0;
	background:#fff;
	box-shadow:5px 5px #000;
}
#hokuo_20200215open .detail .seminer_box ul li img{
}

#hokuo_20200215open .detail .seminer_box ul li h5{
	color:#000;
	font-size:120%;
	font-weight:bold;
	margin:0.5em 0;
}
#hokuo_20200215open .detail .seminer_box ul li date{
	font-size:100%;
	font-weight:bold;
}
#hokuo_20200215open .detail .seminer_box ul li date span{
	font-size:90%;
	display:block;
	background:#ececea;
	text-align:center;
	margin:0 0 5px 0;
	border-radius:10px;
}
#hokuo_20200215open .detail .seminer_box ul li p{
	font-size:90%;
	font-weight:normal;
}


#hokuo_20200215open .marche{
	position:relative;
	background:url(20200220_hokuou_marche_event_img_bg.jpg) no-repeat bottom center,
	            #fbe600;
	background-size: 100% auto;
	padding:50px 0;
}

#hokuo_20200215open .marche::before {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height:200px;
    background: url(20200215_hokuou_marche_bgimg_01.png) no-repeat top center;
}


#hokuo_20200215open .marche .ep{
}


#hokuo_20200215open .marche .title{
	width:100%;
	text-align:center;
	padding:100px 0 0 0;
}

#hokuo_20200215open .marche .ep h6{
	color:#4d85c5;
	font-size:180%;
	font-weight:bold;
	text-align:center;
	margin:1em 0;
}

#hokuo_20200215open .marche .ep h6 span::before {
	content: "\A" ;
	white-space: pre ;
}


#hokuo_20200215open .marche .detail2{

}
#hokuo_20200215open .marche .detail2 ul{
	width:95%;
	max-width:900px;
	margin:auto;
	display:flex;
	justify-content:space-between;
	flex-wrap:wrap;
}

#hokuo_20200215open .marche .detail2 ul li{
	width:48%;
	margin:0 0 30px 0;
	padding:1%;
	border:2px dashed #e5b812;
	box-sizing:border-box;
}
#hokuo_20200215open .marche .detail2 ul li img{
	width:80%;
	display:block;
	margin:auto;
}
#hokuo_20200215open .marche .detail2 ul li h5{
	color:#4d85c5;
	font-size:130%;
	font-weight:bold;
	text-align:center;
	margin-top:0.5em;
}

#hokuo_20200215open .marche .detail2 ul li h5 span{
	color:#F44336;
	display:block;
	font-size:80%;
	padding:5px;
	border-radius:5px;
	margin:00.5em 0 0.5em 0;
}

#hokuo_20200215open .marche .detail2 ul li h5 span.balue{
	color:#fff;
	font-size:100%;
	background:#4c85c5;
}


#hokuo_20200215open .marche .detail2 ul li h5 span strong{
	width:50%;
	font-size:80%;
	color:#fff;
	background:#F44336;
	padding:0 1em;
	margin:0 auto;
	display:block;
	border-radius:20px;
}
#hokuo_20200215open .marche .detail2 ul li p{
	font-size:90%;
}

#hokuo_20200215open p.notes{
	font-size:90%;
	position:absolute;
	bottom:10px;
	right:0;
}
#hokuo_20200215open p.notes a{
	color:#E91E63 !important;
}



#hokuo_20200215open .rough{
	display:flex;
	justify-content:space-between;
}
#hokuo_20200215open .rough div{
	width:50%;
	position:relative;
	background:#f5f5f5;
}

#hokuo_20200215open .rough div dl{
	width:96%;
	height:150px;
	position:absolute;
	top:0;
	bottom:0;
	left:0;
	right:0;
	margin:auto;
	display:flex;
	justify-content:space-between;
	background:#f5f5f5;
}

#hokuo_20200215open .rough div dl > div:nth-child(1){
	width:23%;
}
#hokuo_20200215open .rough div dl > div:nth-child(2){
	width:75%;
}

#hokuo_20200215open .rough div dl h6{
	font-size:150%;
	font-weight:bold;
	border-bottom:1px dashed #796f3f;
}
#hokuo_20200215open .rough div dl dt{
	margin:1em 0;

}
#hokuo_20200215open .rough div dl dt span{
	font-size:90%;
	font-weight:bold;
	margin:1em 1em 0 0;
	background:#fbe600;
	padding:0 10px;
	display:
}
#hokuo_20200215open .rough div.map{
	width:50%;
}
#hokuo_20200215open .rough div.map iframe{
	width:100%;
	height:450px;
}


#hokuo_20200215open .contact_btn{
    padding:50px;
    background: url(020-01.png) top center;
    background-size:10%; 
}

#hokuo_20200215open .contact_btn dl{
	font-size:110%;
	font-weight:bold;
	width:60%;
	margin:50px auto;
}
#hokuo_20200215open .contact_btn dl dt{
	margin:60px auto;
	text-align:center;
}

#hokuo_20200215open .contact_btn dl dt span{
	font-size:150%;
	font-weight:bold;
	background:#fff;
	border:2px solid #000;
	padding:20px 50px;
	border-radius:120px;
	box-shadow:5px 7px #c1b818;
}

#hokuo_20200215open .contact_btn dl dt span{
    text-decoration : none;
    display : block;
    box-shadow: 0px 4px 0 rgba(0, 0, 0, .7);
    padding : 8px;
    transition: 0.2s all ease 0s;
}

#hokuo_20200215open .contact_btn dl dt span:hover{
    background-color: #fbe600;
    box-shadow: none;
    transform: translate3d(0, 3px, 0);
}

#hokuo_20200215open .contact_btn dl dt a{
	text-decoration:none;
}






@media screen and (max-width: 959px) {
	#hokuo_20200215open .detail .ep_box{
	    margin:-350px auto 50px auto;
    }
    #hokuo_20200215open .detail .ep_box dt{
	    width:96%;
    }
    #hokuo_20200215open .detail .ep_box dt p strong{
	    font-weight:bold;
    }
    #hokuo_20200215open .detail .event_box ul{
    	flex-wrap:wrap;
    }
    #hokuo_20200215open .detail .event_box ul li{
    	width:25%;
    }
    #hokuo_20200215open .detail .event_box ul li span{
    	font-size:90%;
    }
    #hokuo_20200215open .rough div dl{
    width:80%;
	height:auto;
	position:unset;
	top:unset;
	bottom:unset;
	left:unset;
	right:unset;
	margin:auto;
	display:unset;
	justify-content:unset;
    }
    #hokuo_20200215open .rough div dl > div:nth-child(1){
	    width:100%;
	    text-align:center;
	    margin:50px 0 0 0;
    }
    #hokuo_20200215open .rough div dl div img{
    	width:20%;
    }
    #hokuo_20200215open .rough div dl > div:nth-child(2){
	    width:90%;
	    margin:auto;
    }
    #hokuo_20200215open .contact_btn{
        padding:30px 0;
    }

    #hokuo_20200215open .contact_btn dl{
	    font-size:110%;
	    font-weight:bold;
	    width:80%;
	    margin:30px auto;
    }
    #hokuo_20200215open .contact_btn dl dt{
		margin:20px auto;
    }

    #hokuo_20200215open p.notes{
	    right:unset;
    }
}



@media screen and (max-width: 768px) {
	#hokuo_20200215open .detail .ep_box{
	    margin:-280px auto 50px auto;
    }

    #hokuo_20200215open .detail .seminer_box ul li{
	width:45%;
    }

    #hokuo_20200215open .marche::before {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    background-size:100%;
    }

    #hokuo_20200215open .marche .title{
	    padding:50px 0 0 0;
    }
    #hokuo_20200215open .marche .title img{
	    width:90%;
    }
    #hokuo_20200215open .marche .ep h6{
	font-size:130%;
    }
    #hokuo_20200215open .marche .detail2 ul li{
	    width:48%;
    }

    #hokuo_20200215open .rough{
	    display:unset;
	    justify-content:unset;
    }
    #hokuo_20200215open .rough div{
	    width:100%;
	    padding:10px 0;
	    margin:auto;
	    position:relative;
    }
    #hokuo_20200215open .rough div dl h6{
	text-align:center;
	margin:10px 0 0 0;
    }
    #hokuo_20200215open .rough div.map{
	width:100%;
    }
    #hokuo_20200215open .contact_btn{
        padding:50px 0;
    }
}

@media screen and (max-width: 499px) {
	#hokuo_20200215open .detail .ep_box{
	    margin:-150px auto 50px auto;
    }
    #hokuo_20200215open .detail .event_box ul li{
    	width:50%;
    }
    #hokuo_20200215open .detail .campaign_box dd{
	    display:unset;
	    justify-content:unset;
    }
    #hokuo_20200215open .detail .campaign_box dd div{
	    width:100%;
	    margin-bottom:20px;
    }
    #hokuo_20200215open .detail .seminer_box ul li{
	    width:100%;
    }
    #hokuo_20200215open .detail .seminer_box ul li h5{
	text-align:center;
    }
    #hokuo_20200215open .detail .seminer_box ul li date span{
	font-size:105%;
    }
    #hokuo_20200215open .marche .ep h6{
	font-size:150%;
    }
    #hokuo_20200215open .marche .ep h6 span::before {
	    content: unset ;
	    white-space: unset ;
    }
    #hokuo_20200215open .marche .detail2 ul li{
	    width:100%;
    }
    #hokuo_20200215open .marche .detail2 ul li img{
	width:50%;
    }
    #hokuo_20200215open .marche .detail2 ul li h5{
    }

    #hokuo_20200215open .marche .detail2 ul li h5 span{
	    font-size:90%;
    }
    #hokuo_20200215open .marche .detail2 ul li h5 span strong{
	font-size:100%;
    }
    #hokuo_20200215open .rough div{
    width:100%;
    padding:2%;
    box-sizing:border-box;
    }
    #hokuo_20200215open .rough div dl > div:nth-child(2){
	    width:100%;
	    margin:auto;
    }
    #hokuo_20200215open .rough div dl dt{
    	font-size:90%;
    }
    #hokuo_20200215open .contact_btn dl{
	    font-size:90%;
	    font-weight:bold;
	    width:96%;
	    margin:0px auto;
    }
    #hokuo_20200215open .contact_btn dl dt span{
	font-size:105%;
    }
    #hokuo_20200215open .rough div.map iframe{
	height:350px;
    }
}