@charset "UTF-8";
/* ------------------------------------------------------------------------
css見出し構成
---------------------------------------------------------------------------
	- common（初期設定）
    - page（ページ固有設定）
------------------------------------------------------------------------ */


/* ============================================================================
　common（初期設定）
============================================================================ */
.container-fluid .content_text_wrap{
	max-width: 900px;
	margin: auto;
}
/* ============================================================================
　page（ページ固有設定）
============================================================================ */
.main.page{
    background: linear-gradient(to bottom,#C51D1D 0%,#C51D1D 42%,#F9F0E8 52%);
}
@media screen and (max-width: 768px) {
    .main.page{
        background: linear-gradient(to bottom, #C51D1D 0%, #C51D1D 44%, #F9F0E8 53%);
    }
}

.youtube-box{
	position: relative;
	width: 100%;
	height: 100%; 
	padding-bottom: 56.25%;
	overflow: hidden;
}
.youtube-box::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 10;
}
.youtube-box iframe{
	position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  min-width: 177.78%;    /* 16:9 を height 基準で cover */
  min-height: 100%;
  transform: translate(-50%, -50%);
}
@media screen and (max-width: 768px) {
	.youtube-box{
		padding-bottom: 100%;
	}
}

/* grab_titleの設定(子供の頃の懐かしい祭りのにぎわい)
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
.grab_title {
	background-image: url("images/title-img.png");
    background-repeat: no-repeat;
    background-size: 100%;
    width: 100%;
    height: 496px;
    padding: 150px 0 0;
    color: #fff;
    text-align: center;
}
.grab_title h1{
    font-family: "Yu Mincho", "YuMincho", "a-otf-ryumin-pr6n", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "HiraMinProN-W3", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif;
    margin: 0;
}
@media screen and (max-width: 768px) {
	.grab_title {
		height: 167px;
        padding: 28px 0;
        background-size: 125%;
	}
    .grab_title h1{
        font-size: 20px;
        padding: 0 20px;
    }
    .grab_title p{
        font-size: 10px;
    }
}
/* 1100px以上用（PC用）の記述 （グローバルナビが表示された時）*/
@media screen and (min-width: 1100px){
	.grab_title::after {
    margin-bottom: -130px;
	}
}
/* マップの表示非表示
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
.map{
	display: none;
}
.access_map{
	display: block;
}

/* maincontent　大枠
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
.maincontent {
    background-size: 100%;
}
@media screen and (max-width: 768px) {
    .maincontent {
        margin: 0 auto;
    } 
}
/* content_wrap_red　赤エリア
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
.content_wrap_red p{
    color: #fff;
}

/* content_wrap_white　白エリア
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
.content_wrap_white p{
    color: #000;
}
/* flex_box1 1枚画像セクション
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
.flex_box1{
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-evenly;
    align-items: center;
    max-width: 1000px;
    margin: 0 auto;
    gap: 110px;
}
.back-img1{
    padding: 100px 0 0 0;
    background-image: url(images/behind01.png);
    background-repeat: no-repeat;
    background-position: top right -160px;
    background-size: 45%;
}
@media screen and (max-width: 768px) {
    .flex_box1{
        display: block;
        text-align: center;
        padding: 0 20px;
    }
    .back-img1{
        padding: 60px 0 0 0;
        background-size: 85%;
    }
}
/* flex_box2 2枚画像セクション
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
.flex_box2{
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    max-width: 1000px;
    margin: 0 auto;
    gap: 110px;
}
.back-img2{
    padding: 100px 0 0 0;
    background-image: url(images/behind02.png);
    background-repeat: no-repeat;
    background-position: top left -160px;
    background-size: 45%;
}
@media screen and (max-width: 768px) {
    .flex_box2{
        display: block;
        text-align: center;
        padding: 0 20px;
    }
    .back-img2{
        padding: 60px 0 0 0;
        background-size: 85%;
        background-position: top 15px left -160px;
    }
}
/* fes_wrap1　イベント画像
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
.fes_wrap1 img{
    width: 100%;
}
/* fes_wrap2　イベント紹介文
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
.fes_wrap2 {
    width: 45%;
}

@media screen and (max-width: 768px) {
    .fes_wrap2 {
        font-size: 10px;
        margin: 25px 0 10px;
        width: auto;
    }
    .fes_wrap2 p{
        text-align: left;
    }
    .fes_wrap2 img{
        max-width: 100%;
        width: auto;
        height: 34px;
        display: block;
    }
}
    
/* slide　画像スライダー
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
.slide-warp{
    margin: 80px 0 200px;
    width: 100%;
}
.swiper {
    width: 100%;
    height: 340px ;
    overflow: hidden;
}
.swiper-wrapper {
    transition-timing-function: linear !important;
/*    height: 300px !important;*/
}
.swiper-slide {
   background-size: 100% !important;
}
.slide-warp .swiper .swiper-wrapper .swiper-slide {
    flex-shrink: 0;
    background-size: cover;     /* はみ出しても全面表示 */
    background-position: center;
    background-repeat: no-repeat;
    /*width: 500px;
    height: 250px;*/
}
.red01 {
  background-image: url(images/red_slide01.jpg);
}
.red02 {
  background-image: url(images/red_slide02.jpg);
}
.red03 {
  background-image: url(images/red_slide03.jpg);
}
.red04 {
  background-image: url(images/red_slide04.jpg);
}
.white01 {
  background-image: url(images/white_slide01.jpg);
}
.white02 {
  background-image: url(images/white_slide02.jpg);
}
.white03 {
  background-image: url(images/white_slide03.jpg);
}
.white04 {
  background-image: url(images/white_slide04.jpg);
}

@media screen and (max-width: 768px) {
    .slide-warp {
        margin: 50px 0 90px;
    }
    .swiper {
        height: 200px; /* ← 好きな高さに */
    }
}