@charset "UTF-8";
/* CSS Document */
/* =========================================================
　メインビジュアル
========================================================= */
.page_title{
	background-image:url(images/title_hanamakimaturi.png),url(images/title_hanamakimaturi_bg.jpg);
    background-repeat: no-repeat,no-repeat;
    background-size: 1280px auto,cover;
    background-position: center center;
    width: 100%;
    height: 540px;
    text-align: center;
}
.page_title h1{
	max-width : 1280px;
	color: #fff;
/*	padding: 65px 0 10px 0;*/
	margin : 0 auto 0 auto;
	font-size: 220%;
	font-weight: bold;
	letter-spacing: 2;
	text-align : center;
}
.page_title h1 img{
	width: 100%;
	height: auto;
}
.mv_copy{
	width : 1000px;
	margin: 30px auto 0;
	color : #fff;
	font-size: 90%;
	font-weight: bold;
	text-shadow: 0 0 10px #7b3e27;
	line-height: 2em;
}
.main{
	background-image: url(images/hanamaki_bg.jpg)
}
/*ボタン*/
.tabikura_btn{
	margin: 0;
	width: 100%;
	padding: 1em 15px 60px;
	box-sizing: border-box;
}
.tabikura_btn a{
	box-sizing: border-box;
	max-width: 100%;
	width: 300px;
	background-color: #fff;
	line-height: 50px;
	height: 50px;
	display: block;
	margin: 0 auto;
	box-shadow: 0 0 10px #7b3e27;
	color: #975a43;
	text-decoration: none;
	font-weight: bold;
}

.footer_sitemap::before {
    content: "";
    display: block;
    background-image: url(images/titline-w-bt_r.png);
    background-size: auto 5px;
    height: 5px;
    width: 100%;
    background-repeat: repeat-x;
    background-position: center top;
    position: absolute;
    top: 0;
    left: 0;
}
h2{
	text-align: center;
	color: #FFFFFF;
	font-size: 50px;
	font-family: Hiragino Mincho StdN,serif;
	font-weight: bold;
	padding-top: 55px;
}
@media screen and (min-width:736px){
	.sp{
	display: none;
}
}
@media screen and (max-width:736px){
	.page_title{
		display: none;
	}
	
	.sp{
		height: auto;
		width: 100%;
		text-align: center
	}
	
	.sp img{
		height: auto;
		width: 100%;
		text-align: center
	}
	
	.page_title h2{
		width : 100%;
		padding: 40px 0 0 0;
		margin : 0 auto 0 auto;
		text-align : center;
	}
	.page_title h2 img{
		max-width: 640px;
		width: 95%;
		height: auto;
	}
	.mv_copy{
		width : 100%;
		margin: 30px auto 0;
		color : #fff;
		font-size: 90%;
		text-align: left;
		padding: 0 15px 0;
		box-sizing: border-box;
	}
	.mv_copy br{
		display: none;
	}
	.main{
		background-color: #fff;
	}
	.tabikura_btn{
		padding: 1em 15px 40px;
	}
	
	h2{
		font-size: 35px;
	}
}/*@media*/


/* 花巻まつり共通--------------------------------------------------------- */
.festival_wrap{
	width: 100%;
	border-style: inset none none none;
	border-width: 10px 0 0 0 ;
	border-image: url(images/midokoro_bd.png) 10 0 0 0 ;
}
.festival_box{
	width: 1000px;
	margin: 0 auto;
	padding: 3em 450px 3em 0;
	box-sizing: border-box;
	background-size: 50% auto;
	background-position: left top 20%;
	background-repeat: no-repeat;
}
.festival_copy {
	padding: 1.5em 0;
}
.festival_copy img{
	max-width: 468px;
	width: 100%;
	height: auto;
}
.festival_box p{
	line-height: 1.8em;
}
.sp_mainimg{
	display: none;
}
.festival_btn{
	margin: 1.5em 0 2em;
}
.festival_btn a{
	background-color: #975a43;
	color: #fff;
	text-decoration: none;
	padding: 1em 2em;
	max-width: 100%;
}
.festival_btn a:hover{
	text-decoration: underline;
}
@media screen and (max-width:736px){
	.festival_box{
		width: 100%;
		padding: 15px 15px 30px;
		background-size: 100% auto;
		background-position: center top 70%;
	}
	.sp_mainimg{
		display: block;
		width: 100%;
	    padding: 0;
	}
	.sp_mainimg img{
		width: 100%;
		height: auto;
	}
}

#FESTIVAL_WRAP p{
	color: #FFFFFF;
	font-size: 1.15em
}

.festival_wrap h4{
	color: #F0C349;
	font-size: 25px;
}

.festival_wrap h4.yellow{
	font-size: 25px;
}

.festival_wrap .days{
	font-size: 17px;
	margin-top:20px;
	
}

/* 花巻まつり ページ内ナビ--------------------------------------------------------- */
#FESTIVAL_WRAP nav{
	margin: 0 auto;
	width: 100%;
	text-align: center;

}

#FESTIVAL_WRAP nav ul{
	display: inline-flex;
	padding-top:35px;
	flex-wrap: wrap;
	text-align: center;
/*	padding-bottom: 52px;*/
}

#FESTIVAL_WRAP nav ul li{
	background-color: #BC4343;
	display: inline-flex;
	flex-wrap: wrap;
	border: solid #F0A449 2px;
	width: 180px;
	text-align: center;
/*	padding: 13px 10px;*/
	padding: 0;
	
}

#FESTIVAL_WRAP nav ul li a{
	color: #fff;
	padding: 1em 0px;
	text-align: center;
	display: block;
	width: 100%;
	margin: 0 auto;
}

#FESTIVAL_WRAP a:hover {
text-decoration: underline;
}


@media screen and (max-width:736px){
	#FESTIVAL_WRAP nav{
	margin: 0 auto;
	width: 306px;
}
	
	#FESTIVAL_WRAP nav ul{
	display: inline-flex;
	width: 100%;
	margin: 0 auto;
	padding-top:35px;
/*	margin-left: 2px;*/
	flex-wrap: wrap;
/*	padding-bottom: 52px;*/
}

	
	#FESTIVAL_WRAP nav ul li{
	background-color: #BC4343;
	display: inline-flex;
	flex-wrap: wrap;
	border: solid #F0A449 2px;
	width: 149px;
	
	
}
	#FESTIVAL_WRAP nav ul li a{
	color: #fff;
	padding: 13px 7px;
}
}
/*キャッチコピー
--------------------------------------------------------- */
.catch{
	text-align: center;
	margin: 2.5em 0 0;
}
@media screen and (max-width:736px){
.catch{
	text-align: justify;
	margin: 2.5em 0 0;
	padding: 20px;
}
.catch br{
	display: none;
}
}

/* 1段目 神輿
--------------------------------------------------------- */
#MIKOSHI{
	background-image: url(images/mikoshi_bg.jpg);
	background-repeat: no-repeat;
	background-size:cover;
	background-position: center center;
	height: auto;
}
#MIKOSHI a{
	color: #fff;
}
.mikoshi_taiken img{
	width: 100%;
	max-width: 363.5px;
	height: 100%;
}
@media screen and (max-width:736px){
#MIKOSHI{
	height: 120%;
	background-image: url(images/midokoro_sp_b.png);
/*	background-repeat: no-repeat;*/
	background-size:cover;
	background-position: center center;
	padding-bottom: 20px;
	}
}

/* 2段目 山車
--------------------------------------------------------- */
#DASHI{
	background-image: url(images/dashi_bg.jpg);
	background-repeat: no-repeat;
	background-size:cover;
	background-position: center bottom;
}
#DASHI .festival_box{
	padding: 3em 0 3em 450px;
	box-sizing: border-box;
	background-size: 50% auto;
	background-position: right top 20%;
	background-repeat: no-repeat;
}
@media screen and (max-width:736px){
	#DASHI{
		background: none;
	}
	#DASHI .festival_box{
	width: 100%;
	padding: 15px;
	background-size: 100% auto;
	background-position: center top 70%;
	height: 120%;;
	background-image: url(images/midokoro_sp_b.png);
/*	background-repeat: no-repeat;*/
	background-size:cover;
	background-position: center center;
	padding-bottom: 50px;
	}
}

/* 3段目 神楽権現舞
--------------------------------------------------------- */
#KAGURA{
	background-image: url(images/kagura_bg.jpg);
	background-repeat: no-repeat;
	background-size:cover;
	background-position: center bottom;
}
#KAGURA .festival_box{
	padding: 3em 0 3em 470px;
	box-sizing: border-box;
	background-size: 50% auto;
	background-position: right top 20%;
	background-repeat: no-repeat;
}
@media screen and (max-width:736px){
	#KAGURA{
	height: 120%;
	background-image: url(images/midokoro_sp_b.png);
/*	background-repeat: no-repeat;*/
	background-size:cover;
	background-position: center center;
	padding-bottom: 20px;
	}
	#KAGURA .festival_box{
	padding: 0 20px;
	box-sizing: border-box;
	background-size: 50% auto;
	background-position: right top 20%;
	background-repeat: no-repeat;
}
}

/* 4段目 鹿踊
--------------------------------------------------------- */

#SISIODORI{
	background-image: url(images/sisiodori_bg.jpg);
	background-repeat: no-repeat;
	background-size:cover;
	background-position: center bottom;
}
#SISIODORI .festival_box{
/*	padding: 3em 0 3em 450px;*/
	box-sizing: border-box;
	background-size: 50% auto;
	background-position: right top 20%;
	background-repeat: no-repeat;
}
@media screen and (max-width:736px){
	#SISIODORI{
	height: 120%;
	background-image: url(images/midokoro_sp_b.png);
/*	background-repeat: no-repeat;*/
	background-size:cover;
	background-position: center center;
	padding-bottom: 20px;
	}
	#SISIODORI .festival_box{
		width: 100%;
		padding: 15px;
		background-size: 100% auto;
		background-position: center top 70%;
	
	}
}

/* 5段目 花巻ばやし踊り
--------------------------------------------------------- */
#BAYASHI{
	border-style:  inset none inset none;
	border-width: 10px 0 10px 0 ;
	border-image: url(images/midokoro_bd.png) 10 0 10 0 ;
	background-image: url(images/bayashi_bg.jpg);
	background-repeat: no-repeat;
	background-size:cover;
	background-position: center bottom;
}
@media screen and (max-width:736px){
	#BAYASHI{
		background-image: url(images/midokoro_sp_b.png);
/*	background-repeat: no-repeat;*/
	background-size:cover;
	background-position: center center;
	padding-bottom: 20px;
	}
}



/* タイムスケジュール
--------------------------------------------------------- */
#TIME_WRAP{
	max-width: 1100px;
	margin: 0 auto;
	
}
#time{
		width: 100%;
	display: inline-flex;
	flex-wrap: wrap;
	justify-content: space-around;
}
#time img{
	width: 100%;
}
#TIME_WRAP p.program1,p.program2,p.program2_b{
/*	padding-bottom: 30px;*/
	color: #393939;
}
.number{
	max-width: 242px;
	margin: 0 auto;
}
.time_wrap{
	max-width: 350px;
	height: 1166px;
	background-image: url(images/time_number_bg.png);
	margin-bottom: 10px;
	width: 100%;
	background-repeat: no-repeat;
}
.time_box{
	padding: 30px 26px 0px 26px;
	width: 290px;
	margin: 0 auto;
}
h2 p.access{
	text-align: center;
	font-size: 17px;
	font-weight: 100;
	
}
p.attention{
	color: #BC4343;
	margin-top: -10px;
}
p.day{
	font-size: 2.1em;
	font-family: YuMincho;
	font-weight: bold;
	text-align: center;
	padding: 0 0 .2em;
}
p.day span{
	font-size: 1.5em;
}
p.day span.blue{
	color: #00A0E9;
	font-size: 40px;
}
p.day span.red{
	color: #E60012;
	font-size: 40px;
}
/*文字数の少ない時間*/
p.zikoku{
	background-color: #98373C;
	border-radius: 30px;
	padding-left: 10px;
	padding: 2px 10px;
	color: #FFFFFF;
	position: relative;
	z-index: 999;
	max-width: 137px;
	text-align: left;
	font-size: 0.95em;
	margin-bottom: 0.2em;
}
p.zikoku::after{
	content: "";
	background-color: #98373C;
	height: 5px;
	width: 90%;
	display: block;
	position: absolute;
	top: 45%;
	right: -134px;
}
/*文字数の多い時間*/
p.zikoku_l{
	background-color: #98373C;
	border-radius: 30px;
	padding-left: 10px;
	padding: 2px 10px;
	color: #FFFFFF;
	position: relative;
	z-index: 999;
	max-width: 140px;
	text-align: left;
	font-size: 0.9em;
	margin-bottom: 0.2em;
}
p.zikoku_l::after{
	content: "";
	background-color: #98373C;
	height: 5px;
	width: 90%;
	display: block;
	position: absolute;
	top: 45%;
	right: -130px;
}

/*大きいイベント*/
p.program1{
	font-size: 22px;
	font-weight: bold;
	padding-bottom:0.3em;
}
/*次に大きいイベント（太字）*/
p.program2_b{
	font-size: 22px;
	font-weight: bold;
	padding-bottom:0.5em;
}
/*次に大きいイベント*/
p.program2{
	font-size: 22px;
	padding-bottom:0.5em;
	font-weight: bold;
}

p.program2_br{
	font-size: 20px;
	font-weight: bold;
	color: #98373C;
	margin-bottom: -10px;
}
.time_fe{
	padding-bottom:30px;
}

@media screen and (max-width:736px){
#time {
    display: inline-flex;
    flex-wrap: wrap;
}
#TIME_WRAP p{
/*	width: 319px;*/
/*	margin: 0 auto;*/
}

h2 p.access{
	text-align: center;
	font-size: 17px;
	font-weight: 100;
	width: 300px;
}
.time_wrap{
	max-width: 320px;
	height: 1050px;
	background-image: url(images/time_number_bg.png);
	background-size: 100% 96%;
	background-repeat: no-repeat;
	margin-bottom: 10px;
	width: 100%;
}
.time_box{
	padding: 30px 1em 0;
	max-width: 260px;
	width: 100%;
	margin: 0 auto;
}
/*大きいイベント*/
p.program1{
	font-size: 15px;
	font-weight: bold;
	padding-bottom:0.8em;
}
/*次に大きいイベント（太字）*/
p.program2_b{
	font-size: 15px;
	font-weight: bold;
	padding-bottom:0.8em;
}
/*次に大きいイベント*/
p.program2{
	font-size: 15px;
	padding-bottom:0.8em;
}

p.program2_br{
	font-size: 15px;
	font-weight: bold;
	color: #98373C;
	margin-bottom: -10px;
}
/*文字数の少ない時間*/
p.zikoku{
	width: 100%;
	max-width: 90%;
}
p.zikoku::after{
	display: none;
}
/*文字数の多い時間*/
p.zikoku_l{
	width: 100%;
	max-width: 90%;
}
p.zikoku_l::after{
	display: none;
}
}
/* マップ
--------------------------------------------------------- */
#MAP{
	max-width: 1000px;
	margin: 0 auto;
	margin-bottom: 87px;
}
#MAP div{
	width: 100%;
	height: auto;
		max-width: 600px;
	margin: 0 auto;
}
#MAP img{
	width: 100%;
	height: auto;
}
.gmap {
height: 0;
overflow: hidden;
padding-bottom: 56.25%;
position: relative;
}
.gmap iframe {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
}
@media screen and (max-width:736px){
#MAP{
/*	max-width: 736px;*/
	margin: 0 auto;
	margin-bottom: 87px;
}
	
	#MAP img{
	width: 90%;
	height: auto;
	text-align: center;
	padding: 10px 10px 10px 20px;
	margin: 0 auto;
}

}

/* 同時開催イベント
--------------------------------------------------------- */
#EVENT_bg{
	background-image:  url(images/event_bg_g.png);	
	padding: 0px 0px 70px 0px;
}

#EVENT_WRAP{
	max-width: 1000px;
	margin: 0 auto;
}
#event{
	width: 100%;
	display: inline-flex;
	flex-wrap: wrap;
}
.event_wrap{
	width: 300px;
	height: 164px;
	background-image: url(images/event_bg.png);
	background-repeat: no-repeat;
	margin:0 auto;
	margin-bottom:10px;
}
.event_box{
	padding: 24px 0px 26px 0px;
	text-align: center;
}
.event_box h4{
	font-size: 20px;
	font-weight: bold;
}
.event_box p{
	line-height: 1.2em;
}

/*花巻の秋まつり
--------------------------------------------------------- */
#FALL_bg{
	background-image:  url(images/fall_bg.png);
	background-repeat: repeat;
	padding: 0px 0px 70px 0px;
}

#FALL_WRAP{
	max-width: 1000px;
	margin: 0 auto;
}
#fall{
	width: 100%;
	display: inline-flex;
	flex-wrap: wrap;
}
.fall_wrap{
	width: 287px;
	margin: 0 auto;
}
.fall_box{
	padding: 24px 0px 26px 0px;
	text-align: center;
}

#FALL_WRAP h2{
	color: #B22727;
}

.fall_box h4{
	font-size: 25px;
	font-weight: bold;
	color: #B22727;
}
.fall_box p{
	line-height: 1.2em;
	color: #B22727;
	font-size: 36px;
	font-family: YuMincho;
	font-weight: bold;
	padding-top:17px;
}

.fall_box img:hover{
	transition: opacity 0.3s ease 0s;
}
/* バナー
--------------------------------------------------------- */
#BANNER{
	max-width: 1000px;
	margin: 0 auto;
	padding-top: 100px;
	padding-bottom: 65px
}

#BANNER_WRAP{
	width: 100%;
	display: inline-flex;
	flex-wrap: wrap;
	padding-top: 30px;
}

.banner_wrap{
	width: 475px;
	text-align: center;
	padding: 12px;
	margin: 0 auto;
}

.banner_wrap img{
	width: 100%;
}

#BANNER_WRAP .banner_box p{
	color: #fff;
	font-size: 20px;
}
p.syoukai{
	font-weight: 100;
}

.flex_box{
	display: flex;
    justify-content: space-between;
    padding: 0px;
}

@media screen and (max-width:736px){
	#BANNER_WRAP{
	max-width: 1000px;
	margin: 0 auto;
	padding-top: 50px;
	padding-bottom: 65px
}
	#MAP .flex_box img{
    padding: 0px;
}
}

/* もっと見るボタン
--------------------------------------------------------- */
.more_btn{
	text-align: center;
	margin-top: 50px;
}
.more_btn p{
	max-width: 600px;
	margin: 0 auto;
	padding: 0 20px 0;
	box-sizing: border-box;
}
/* 戻るボタン
--------------------------------------------------------- */
.backbtn{
	text-align: center;
	margin-top: 100px;
}
.backbtn p{
	max-width: 600px;
	margin: 0 auto;
	padding: 0 20px 4em;
	box-sizing: border-box;
}

.btn_box_s a {
    width: 100%;
    background-color: #F0C349;
    padding: 1em;
    color: #fff;
    display: block;
    text-decoration: none;
    background-image: url(../img/arrow_w_l.png);
    background-repeat: no-repeat;
    background-size: 12px 20px;
    background-position: right 10px center;
    text-align: center;
    transition: opacity 0.3s ease 0s;
    box-sizing: border-box;
	
}