@charset "UTF-8";
main {
	margin: -60px 0 0 0;
	width: 100%;
	z-index: 10;
	}
.wrap-video {
position: relative;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}

.wrap-video video {
  position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    min-width: 100%;
    min-height: 100%;
}
.copy,
.copy2 {
	z-index: 20;
	position: absolute;
	top: 50%;
    left: 50%;
   transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
	text-align: center;
}
.copy img {
	width: 60%;
	margin: auto;
}
.copy2 img {
	width: 90%;
	margin: auto;
}
/*スクロールボタンの指定*/
 .scroll {
	 position: absolute;
	 width: 100%;
	 bottom: 0;
	 text-align: center;
}
 .scroll a {
	 position: relative;
	 display: inline-block;
	 font-size: 80%;
	 color: #fff;
	 text-decoration: none;
	 padding: 0 0 50px;
}
 .scroll a:before {
	 content: "";
	 position: absolute;
	 width: 25px;
	 height: 25px;
	 left: 0;
	 right: 0;
	 bottom: 25px;
	 margin: auto;
	 border-bottom: 1px solid #fff;
	 border-right: 1px solid #fff;
	 transform: rotate(45deg);
	 animation: move 2s infinite;
}
/*矢印をアニメーションする*/
 @keyframes move {
	 0% {
		 transform: rotate(45deg) translate(0, 0);
	}
	 20% {
		 transform: rotate(45deg) translate(10px, 10px);
	}
	 40% {
		 transform: rotate(45deg) translate(0, 0);
	}
}

em {
  text-combine-upright: all;
  font-style: normal;
}
/*	 message
/* ------------------------------------- */
.message0 {
	background:  url("../img/message_s.jpg") no-repeat center top;
	background-size: 100%;
	margin: 0;
	width: 100%;
}
.message {
	margin: 0;
	width: 100%;
	padding: 10% 8% 6% 8%;
  box-sizing:border-box;
}
.me,
.me2 {
	font-weight: normal;
	font-size: 140%;
	line-height: 1.6;
	margin: 0 0 -15px 0;
	display: block;
}	
.message p,
.history p,
.town p,
.town2 p {
	font-weight: normal;
font-size: 90%;
	text-align: justify;
}
.message_e,
.history_e,
.town_e,
.town2_e {
	line-height: 1.5 !important;
}
.message_i,
.message_i img {
	width: 100%;
	background:  url("../img/message_s.jpg") no-repeat center;
	background-size: 100%;
}
.town_i img {
	width: 100%;
}
.message_c {
	text-align: right;
	margin: 0 10px 0 0;
	font-size: 80%;
}
/*	 history
/* ------------------------------------- */
.history {
	background:  url("../img/message_s.jpg") no-repeat center top;
	background-size: 100%;
	margin: 0;
	width: 100%;
  box-sizing:border-box;	
}
.history_box {
	margin: 10% 8%;
}
/*	 town
/* ------------------------------------- */
.town {
	background:  url("../img/festival_s.png") no-repeat center top #000;
	background-size: 100%;
	margin: 0;
	width: 100%;
	color: #FFF;
}
.town_box {
	width: 100%;
	padding: 10% 8%;
  box-sizing:border-box;
}
.town_box2 {
	width: 100%;
	padding: 10% 8% 5% 8%;
  box-sizing:border-box;
}
.town2 {
	background:  url("../img/message_s.jpg") no-repeat center top;
	background-size: 100%;
	margin: 0;
	width: 100%;
	color: #000;
}
.town_i {
	width: 84%;
	margin: 0% auto 10% auto;
}
.town_i01 {
	width: 31.5%;
	float: left;
	margin: 5% 2.5% 0 0;
}
.town_i02 {
	width: 31.5%;
	float: left;
	margin: 5% 0 0 0;
}
.town_i a {
	-webkit-filter: opacity(100%);
	filter: opacity(100%);
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}
.town_i a:hover {
	-webkit-filter: opacity(60%);
	filter: opacity(60%);
	text-decoration: none;
}
/*	 button
/* ------------------------------------- */
	
/* ボタン共通設定 */
.btn_b {
    padding: 5px 10px 5px 20px;
	background:rgba(255,255,255,0.5);
	margin: 20px 0 0 0;
	float: left;
}
.btn_b2 {
    padding: 5px 10px 5px 20px;
	background:rgba(226,164,12,0.5);
	margin: 20px 0 0 0;
	float: left;
}
.btn {
       /*矢印の基点とするためrelativeを指定*/
	position: relative;
    /*ボタンの形状*/
	text-decoration: none;
	display: inline-block;
	color:#F4E195;
    padding: 0px 30px 0px 0px;
    outline: none;
    /*アニメーションの指定*/
    transition: ease .2s;
	font-size: 90%;
	float: right;
}
.btn2 {
       /*矢印の基点とするためrelativeを指定*/
	position: relative;
    /*ボタンの形状*/
	text-decoration: none;
	display: inline-block;
	color:#000;
    padding: 0px 30px 0px 0px;
    outline: none;
    /*アニメーションの指定*/
    transition: ease .2s;
	font-size: 90%;
	float: right;
}
.btnarrow1::after{
    content: '';
    /*絶対配置で矢印の位置を決める*/
	position: absolute;
    top:40%;
    right: 10px;
    /*矢印の形状*/
    width: 7px;
    height: 7px;
    border-top: 1px solid #F4E195;
    border-right: 1px solid #F4E195;
    transform: rotate(45deg);
    /*アニメーションの指定*/
    transition: all .3s;
}
.btnarrow2::after{
    content: '';
    /*絶対配置で矢印の位置を決める*/
	position: absolute;
    top:40%;
    right: 10px;
    /*矢印の形状*/
    width: 7px;
    height: 7px;
    border-top: 1px solid #000;
    border-right: 1px solid #000;
    transform: rotate(45deg);
    /*アニメーションの指定*/
    transition: all .3s;
}
/*hoverした際の移動*/
.btnarrow1:hover::after,
.btnarrow2:hover::after {
    right: 5px;
}
.photo {
	background: #000;
		position: relative;
    display: inline-block;
	}
.photo img,
.photo2 img {
	display: block;
    max-width: 100%;
    height: auto;
	}
.photo img:nth-of-type(2),
.photo2 img:nth-of-type(2) {
    position: absolute;
    right: 0%;
    bottom: 0%;
    width: 100%;
    height: auto;
}
.photo2 {
		position: relative;
    display: inline-block;
	}
.photo3 {
	background: #000;
	}
.photo3_01,
.photo3_02 {
	width: 100%;
	}
.photo3_01 img,
.photo3_02 img {
	width: 100%;
	}
/*	 festival
/* ------------------------------------- */	
.festival {
	background:  url("../img/festival_s.png") no-repeat center top #000;
	background-size: 100%;
	margin: 0;
	width: 100%;
	color: #FFF;
}
.festival_box {
	width: 100%;
	padding: 10% 8% 8% 8%;
  box-sizing:border-box;
}
.festival h4 {
	font-size: 120%;
	text-align: center;
	margin: auto;
}
.fes_l,
.fes_l img,
.fes_r,
.fes_r img {
	width: 100%;
}
.fes_l,
.fes_r {
	margin: 6% 0 0 0;
}
.fes_l h5,
.fes_r h5 {
	font-size: 110%;
	text-align: center;
	margin: 7px 0 0 0;
}
.fes_l p,
.fes_r p {
	font-size: 90%;
	text-align: justify;
}
.fes_p_e {
	line-height: 1.5;
}
.guide {
	width: 84%;
	margin: 8% 8% 0 8%;
}
.guide img {
	width: 100%;
}
.guide a {
	-webkit-filter: opacity(100%);
	filter: opacity(100%);
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}
.guide a:hover {
	-webkit-filter: opacity(60%);
	filter: opacity(60%);
	text-decoration: none;
}
/*	 schedule
/* ------------------------------------- */	
.schedule {
	background:  url("../img/back.jpg");
	background-size: 100%;
	padding: 8%;
	text-align: center;
}
.schedule_m {
	font-size: 130%;
}
.schedule_t {
	margin-top: 15px;
	text-align: left !important;
}
.schedule p {
	font-size: 90%;
}
.sct {
	margin: 20px 0px;
}
table {
	border-collapse: collapse;
	border-color: #F3DA9A;
	border-style: solid;
	border-width: 0;
	text-align: left;
line-height:1.5em;
	background: #FFF;
}
table th {
	font-size: 80%;
	line-height: 150%;
	padding: 3px;
	border: 2px solid #F3DA9A;
	font-weight: normal;
}
table td {
	font-size: 80%;
	line-height: 150%;
	padding: 10px;
	border: 2px solid #F3DA9A;
}
.sct img {
	width: 100%;
}
/*	 special
/* ------------------------------------- */	
.special {
	padding: 4% 8% 8% 8%;
	text-align: center;
}
.special img {
	width: 100%;
}
.special a {
	-webkit-filter: opacity(100%);
	filter: opacity(100%);
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}
.special a:hover {
	-webkit-filter: opacity(60%);
	filter: opacity(60%);
	text-decoration: none;
}
/* ------------------------------------- */
/*	 resposive768
/* ------------------------------------- */
@media screen and (min-width: 768px) {
.br_sp { 
display: block;
}
.br_sp2 { 
display:none;
}

.copy {
	z-index: 20;
	position: absolute;
	width: 35%;
}
.copy2 {
	z-index: 20;
	position: absolute;
	width: 40%;
}
/*	 message
/* ------------------------------------- */	
.message0 {
	background:  url("../img/message.jpg") no-repeat center;
	background-size: 100%;
	width: 100%;
}
.message {
	width: 100%;
	padding: 6% 0 4% 0;
  box-sizing:border-box;
	text-align: center;
   display: flex;
  justify-content: space-between;
}
.message_box {
	margin: 0;
	width: 100%;

}
.me {
	font-size: 160%;
	line-height: 1.6;
	text-align: left;
	margin: 0 0 0 -20px;
}
.me2 {
	font-size: 160%;
	line-height: 1.6;
	text-align: left;
	margin: 0 0 -15px 0;
}
.message p,
.history p,
.town p,
.town2 p {
	line-height: 2.2;
	font-weight: normal;
font-size: 100%;
  text-align: left;
  display: inline-block;
	white-space: nowrap;
  box-sizing: border-box;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
	font-fauture-settings:initial !important;
}
.message_e,
.history_e,
.town_e,
.town2_e {
	text-align: justify !important;
	padding: 0px 8%;
	line-height: 1.8 !important;
	text-align: justify;
	white-space: normal !important;
  box-sizing: border-box;
  -ms-writing-mode: lr-tb !important;
  writing-mode: horizontal-tb !important;
}
.tcy {
  text-combine-upright: all;
	line-height: 2.5 !important;
}
.message_c {
	text-align: left;
	margin: 0 0 0 10px;
	font-size: 90%;
}
.message_i {
	width: 100%;
	background:  url("../img/message.jpg") no-repeat top center;
	background-size: 100%;
}
	
/*	 history
/* ------------------------------------- */
.history {
	background:  url("../img/message.jpg") no-repeat top center;
	background-size: 100%;
	margin: 0;
  box-sizing:border-box;
	text-align: center;
   display: flex;
  justify-content: space-between;
}	
.history_box {
	margin: 6% 0;
	width: 100%;
}
/*	 town
/* ------------------------------------- */
.town {
	background:  url("../img/festival.png") no-repeat center #000;
	background-size: 100%;
	width: 100%;
  box-sizing:border-box;
	text-align: center;
  justify-content: space-between;
}
.town_box {
	width: 100%;
	padding: 6% 0 6% 0;
  box-sizing:border-box;
		margin: auto;
}
.town_box2 {
	width: 100%;
	padding: 6% 0 3% 0;
  box-sizing:border-box;
		margin: auto;
}
.town2 {
	background:  url("../img/message.jpg") no-repeat top center;
	background-size: 100%;
	width: 100%;
  box-sizing:border-box;
	text-align: center;
  justify-content: space-between;
}
.town_i {
	width: 84%;
	margin:0 auto 6% auto;
}
.town_i01 {
	width: 15%;
	float: left;
	margin: 0 2% 0 0;
}
.town_i02 {
	width: 15%;
	float: left;
	margin: 0 2% 0 0;
}
.town_i03 {
	margin: 0 0 0 0 !important;
}
/*	 button
/* ------------------------------------- */
	
/* ボタン共通設定 */
.btn_b {
    padding: 15px 5px 30px 5px;
  writing-mode: vertical-rl;
	margin: 0 20px 0 50px;
	float: left;
}
.btn_b2 {
    padding: 15px 2px 30px 2px;
  writing-mode: vertical-rl;
	margin: auto 20px;
}
.btn,
.btn2 {
    /*矢印の基点とするためrelativeを指定*/
	position: relative;
    /*ボタンの形状*/
	text-decoration: none;
	display: inline-block;
    outline: none;
    /*アニメーションの指定*/
    transition: ease .2s;
	padding: 0;
	margin: 0;
}

/* 矢印が移動 */

.btnarrow1::after{
    content: '';
    /*絶対配置で矢印の位置を決める*/
	position: absolute;
    left:0px;
	right:0px;
	top: auto;
    bottom: -10px;
    /*矢印の形状*/
    width: 7px;
    height: 7px;
    border-top: none;
    border-bottom: 1px solid #F4E195;
    border-right: 1px solid #F4E195;
    transform: rotate(45deg);
    /*アニメーションの指定*/
    transition: .3s;
	 margin: auto;
}
.btnarrow2::after{
    content: '';
    /*絶対配置で矢印の位置を決める*/
	position: absolute;
    left:0px;
	right:0px;
	top: auto;
    bottom: -10px;
    /*矢印の形状*/
    width: 7px;
    height: 7px;
    border-top: none;
    border-bottom: 1px solid #000;
    border-right: 1px solid #000;
    transform: rotate(45deg);
    /*アニメーションの指定*/
    transition: .3s;
	 margin: auto;
}
/*hoverした際の移動*/
.btnarrow1:hover::after,
.btnarrow2:hover::after {
    bottom: -15px;
	right: 0;
}

	
/*	 festival
/* ------------------------------------- */	
.festival {
	background:  url("../img/festival.png") no-repeat center top #000;
	background-size: 100%;
}
.festival_box {
	width: 100%;
	padding: 6% 8%;
  box-sizing:border-box;
}
.festival h4 {
	font-size: 120%;
	text-align: center;
	margin: auto;
}
.fes_l,
.fes_r {
	width: 49%;
}
.fes_l {
	margin: 2% 0 0 0;
	float: left;
}
.fes_r {
	margin: 2% 0 0 0;
	float: right;
}
/*	 schedule
/* ------------------------------------- */	
.schedule {
	padding: 40px 8%;
	text-align: center;
}
.schedule_m {
	font-size: 170%;
}
.schedule_t {
	text-align: center !important;
}
.schedule p {
	font-size: 90%;
}
.sct {
	margin: 20px 0px;
}
table th {
	font-size: 90%;
	line-height: 1.8;
}
table td {
	font-size: 90%;
	line-height: 1.8;
}

.guide {
	margin: 6% auto 0 auto;
}
/*	 special
/* ------------------------------------- */	
.special {
	padding: 3% 0 6% 0;
}
.special img {
	width: 84%;
	margin: auto;
}
}
/* ------------------------------------- */
/*	 resposive980
/* ------------------------------------- */
@media screen and (min-width: 980px) {
.br_sp3 { 
display: none;
}

.copy {
	z-index: 20;
	position: absolute;
	width: 25%;
}
.copy2 {
	z-index: 20;
	position: absolute;
	width: 25%;
}
/*	 message
/* ------------------------------------- */	
.me,
.me2 {
	font-size: 170%;
	line-height: 1.6;
}	
.message p,
.history p,
.town p,
.town2 p	{
	line-height: 2.5;
	font-weight: normal;
font-size: 110%;
  text-align: left;
  display: inline-block;
	white-space: nowrap;
  box-sizing: border-box;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
}
.message_e,
.history_e,
.town_e,
.town2_e {
	width: 980px;
	margin:0 auto;
	padding: 0;
}
.town_i {
	width: 980px;
	margin:0 auto 6% auto;
}
/*	 festival
/* ------------------------------------- */		
.festival_box {
	width: 980px;
	padding: 6% 0 4% 0;
	margin: auto;
}
.festival h4 {
	font-size: 160%;
}
.fes_l h5,
.fes_r h5 {
	font-size: 140%;
	text-align: center;
	margin: 10px 0 0 0;
}
.fes_l p,
.fes_r p {
	font-size: 110%;
	text-align: justify;
}
.guide {
	width: 980px;
	margin: 4% auto 0 auto;
}
	
/*	 schedule
/* ------------------------------------- */	
.schedule {
	padding: 60px 0;
}
.schedule_box {
	width: 980px;
	margin: auto;
}
.schedule p {
	font-size: 110%;
}
table th {
	font-size: 110%;
	line-height: 2;
}
table td {
	font-size: 110%;
	line-height: 2;
}
/*	 special
/* ------------------------------------- */	
.special {
	padding: 30px 0 60px 0;
}
.special img {
	width: 980px;
	margin: auto;
}
}
/* ------------------------------------- */
/*	 resposive1300
/* ------------------------------------- */
@media screen and (min-width: 1300px) {

.content02_2 {
	width: 100%;
	background: url(../img/i02_2.png) no-repeat center right;
	background-size: 50%;
}
.content03	{
	width: 100%;
	background: url(../img/i03_3.png) no-repeat center right #640000;
	background-size: 50%;
}
.special h3 {
	margin: 30px 0 5px 0;
}
}