@charset "UTF-8"

/* ----------------------------------
    reset
----------------------------------- */
*:where(:not(iframe, canvas, img, svg, video):not(svg *)) {
  all: unset;
  display: revert;
}

* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

*::before,
*::after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  font-size: 16px;
}



body,
h1,
h2,
h3,
h4,
h5 {
  margin: 0px;
  padding: 0px;
  font-weight: normal;
}

body {
  color: #3A2516;
  font-family:
　 font-family:
　　"Zen Maru Gothic"
   "Sawarabi Gothic",
   "Yu Gothic",
   "Hiragino Kaku Gothic ProN",
   "Helvetica Neue",
   "Helvetica",
   "Hiragino Sans",
   "Arial",
   "Meiryo",
   sans-serif;
  line-height: 1.3;
  font-size: 16px;
}

ol,
ul {
  list-style: none;
}

img {
  max-width: 100%;
  height: auto;
}

table {
  border-collapse: collapse;
}

a {
  cursor: pointer;
}

input[type=text],
input[type=tel],
input[type=email],
input[type=esubmit],
button,
select,
textarea {
  padding: 0;
  border: none;
  border-radius: 0;
  outline: none;
  background: none;
}

/* ----------------------------------
    基本レイアウト
----------------------------------- */
.zen-maru-gothic-regular {
  font-family: "Zen Maru Gothic", serif;
  font-weight: 400;
  font-style: normal;
}

b{
	font-family: "Zen Maru Gothic", serif;
	color="#3A2516"
}

.zen-kaku-gothic-new-regular {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 400;
  font-style: normal;
}
p, td, th{
	font-family: "Zen Kaku Gothic New", sans-serif;
	color="#000000"
}


#wrapper {
  overflow: hidden;
}

.main_width {
  height: auto;
  width: auto;
  margin-left: auto;
  margin-right: auto;
  margin-top: auto;
  margin-bottom: auto;
}




/* ----------------------------------
    共通パーツ
----------------------------------- */

.section{
	position: relative;
}


h2 img {
  height: 70px;
}

rt {
  font-size: 10px;
  -webkit-transform: scale(0.5);
  transform: scale(0.8);
  ruby-align: distribute-space;
}


@media screen and (min-width : 390px ){
  h2 img {
    height: 100px;
  }

  rt {
    font-size: 10px;
    ruby-align: distribute-space;
  }
}

h4 {
  font-size: 4vw;
}

@media screen and (min-width : 390px ){
  h4 {
    font-size: 2vw;
  }
}

h5 {
  font-size: 10px;
  color: #78B53B;
  text-align: center;
  margin-top: 50px;
}

@media screen and (min-width : 390px ){
  h5 {
    font-size: 13px;
    color: #78B53B;
    text-align: center;
    margin-top: 50px;
  }
}

.btn_hover a img {
  position: relative;
  top: 0;
}

.btn_hover a img:hover {
  top: -10px;
  transition: 0.3s;
}

#seurat {
  font-family: "fot-seurat-pron", sans-serif;
  font-weight: 600;
  font-style: normal;
}	
	
/* ポップアップ
----------------------------- */
/* 初期状態でポップアップを非表示に */
.popup-wrapper {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh; /* 画面全体をカバー */
    background-color: rgba(0, 0, 0, 0.8); /* 背景を透過した黒に設定 */
    z-index: 1000;
    justify-content: center;
    align-items: center;
    padding-left: 5vw; /* 左右に余白を追加 */
    padding-right: 5vw;
    overflow-y: auto; /* スクロールを許可 */
}

/* ポップアップの表示時 */
.popup-wrapper.active {
    display: flex;
	animation: zoomIn 0.5s ease forwards; /* ズームインアニメーション */
}

/* ズームインのアニメーション */
@keyframes zoomIn {
    0% {
        transform: scale(0); /* 最初は小さく */
        opacity: 0; /* 最初は透明 */
    }
    100% {
        transform: scale(1); /* 通常のサイズに */
        opacity: 1; /* 透明度を1に */
    }
}

.popup{
	position: relative;
	background-color:#FFFFFF;
	padding: 2%;
	z-index: 2;
	max-height: 100vh; /* 画面全体の高さを使う */
    box-sizing: border-box; /* 高さをパディングに含める */
    overflow-y: auto; /* 内部のコンテンツをスクロール可能に */
}
.all{
	display: grid;
	border: dashed 2px;
	grid-template-columns: repeat(auto-fit, minmax(35vw, 1fr));
	gap: 5%;
	padding: 5%;
	z-index: 5;
}
.popup-title{
	display: flex;
}
.area-tag-shimogo-p{
	position: relative;
	background-color: #7F3819;
	font-size: 1.5vw;
	letter-spacing: 1px;
	padding: 0.8vw 1.5vw;
	border-radius: 10px; 
	margin-left: -2vw;
	top: -5px;
	white-space: nowrap;
}
.area-tag-hinoemata-p{
	position: relative;
	background-color: #CE952E;
	font-size: 1.5vw;
	letter-spacing: 1px;
	padding: 0.8vw 1.5vw;
	border-radius: 10px; 
	margin-left: -2vw;
	top: -5px;
	white-space: nowrap;
}
.area-tag-tadami-p{
	position: relative;
	background-color: #437008;
	font-size: 1.5vw;
	letter-spacing: 1px;
	padding: 0.8vw 1.5vw;
	border-radius: 10px; 
	margin-left: -2vw;
	top: -5px;
	white-space: nowrap;
}
.area-tag-minamiaizu-p{
	position: relative;
	background-color: #A9EA63;
	font-size: 1.5vw;
	letter-spacing: 1px;
	padding: 0.8vw 1.5vw;
	border-radius: 10px; 
	margin-left: -2vw;
	top: -5px;
	white-space: nowrap;
}
.popup-title{
	position: relative;
	font-size: 2vw;
	z-index: 50;
	top: -5px;
	margin-left: -1vw;
	white-space: nowrap;
}
.popup-underline01{
	position: relative;
	margin-top: 1%;
	margin-bottom: 5%;	
	z-index: 50;
}

/* スライドのメイン画像コンテナ */
.popup-mainpic-container {
  position: relative;
  width: 40vw;
  height: 30vw;
  overflow: hidden;
}

/* 各スライドの画像 */
.popup-mainpic {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  top: 0;
  left: 0;
  transform: translateX(100%); /* 初期は右側に配置 */
  transition: transform 0.5s ease-in-out; /* スライドアニメーション */
}

.popup-mainpic.active {
  transform: translateX(0); /* 表示位置（中央） */
}

.popup-mainpic.previous {
  transform: translateX(-100%); /* 前のスライドの位置（左側） */
}

.popup-mainpic.next {
  transform: translateX(100%); /* 次のスライドの位置（右側） */
}

/* スライドボタンのスタイル */
.slide-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  border: none;
  padding: 10px;
  cursor: pointer;
  z-index: 100;
  opacity: 0.7;
  transition: opacity 0.3s ease;
}

.slide-btn:hover {
  opacity: 1;
}

/* 前へボタンを左側に配置 */
.prev-slide {
  left: 10px;
}

/* 次へボタンを右側に配置 */
.next-slide {
  right: 10px;
}

/* 画像が1枚の場合はスライドボタンを非表示 */
.popup-mainpic-container.single-slide .prev-slide,
.popup-mainpic-container.single-slide .next-slide {
  display: none;
}








.right{
	padding-top: 10%;
}
.popup-info{
	position: relative;
	padding-bottom: 3%;
	z-index: 50;
}
.popup-p{
	position: relative;
	display: block;
	font-size: 14px;
	letter-spacing: 0.1vw;
	line-height: 2;
	z-index: 50;
	padding-bottom: 3%;
}
.popup-underline02{
	padding-bottom: 3%;
}
.kaisaikikan{
    display: block; /* 要素をブロックに設定 */
    border: 2px solid #F5AB18;
    letter-spacing: 0.1vw;
    padding: 0.5vw 6vw;
    border-radius: 15px;
    margin: 1vw auto; /* 左右のマージンを自動にして中央揃え */
    text-align: center;
}

.contact td {
  word-wrap: break-word;
  word-break: break-all;
  white-space: normal; /* 長い単語でも改行を許可 */
  padding: 5px; /* セル内の余白を追加 */
}

.contact th {
  width: 20%; /* thの幅を均等に設定 */
  white-space: nowrap; /* 改行させない */
  vertical-align: top; /* 上寄せを維持 */
  padding: 5px; /* セル内の余白を追加 */
}
.contact{
	position: relative;
	display: block;
	margin-top: 5%;
	margin-left: 5%;
	margin-bottom: 5%;
	font-size: 14px;
	z-index: 50;
	width: 90%; /* テーブル全体の幅を設定 */
    table-layout: fixed; /* 列の幅を固定 */
    border-collapse: collapse; /* セルの枠線を崩さない */
}
.popup01{
	position: absolute;
	width: 5vw;
	top: 7w;
	left: 34vw;
	z-index: -1;
}
.popup02{
	position: absolute;
	width: 13vw;
	top: 3vw;
	left: 74vw;
	z-index: -1;
}
.popup03{
	position: absolute;
	width: 8vw;
	top: 40vw;
	left: 66vw;
	z-index: -1;
}

.next-popup {
    background-color: #ADD8E6; /* 淡いブルー */
    color: white;
    border: none;
    border-radius: 30px; /* 丸みを強調 */
    padding: 5px 20px;
    font-size: 16px;
    font-family: "Zen Maru Gothic", sans-serif;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 影をつけて浮かせる */
    cursor: pointer;
    transition: background-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
    margin-bottom: 10px; /* 閉じるボタンとの間に余白を追加 */
    display: block; /* ブロック要素で表示 */
    text-align: right; /* テキスト右揃え */
    margin-left: auto; /* 右詰めを確実にするための調整 */
    margin-right: 0;
}

.next-popup:hover {
    background-color: #87CEFA; /* ホバー時に少し濃いブルー */
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.2); /* ホバー時に影を強調 */
    transform: translateY(-3px); /* ホバー時に少し上に浮かせる */
}

.next-popup:active {
    background-color: #4682B4; /* クリック時に濃いブルー */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* クリック時は少し影を減らす */
    transform: translateY(0); /* クリック時は元の位置に */
}

.close-popup {
    background-color: #FFB6C1; /* 淡いピンク色 */
    color: white;
    border: none;
    border-radius: 30px; /* 丸みを強調 */
    padding: 5px 20px;
    font-size: 16px;
    font-family: "Zen Maru Gothic", sans-serif;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 影をつけて浮かせる */
    cursor: pointer;
    transition: background-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
	top: 4vw;
	text-align: right; /* テキスト右揃え */
    display: block; /* ブロック要素にして右詰めが適用されるように */
    margin-left: auto; /* 右詰めを確実にするための調整 */
    margin-right: 0;
}

.close-popup:hover {
    background-color: #FF69B4; /* ホバー時に少し濃いピンク */
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.2); /* ホバー時に影を強調 */
    transform: translateY(-3px); /* ホバー時に少し上に浮かせる */
}

.close-popup:active {
    background-color: #FF1493; /* クリック時に濃い色 */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* クリック時は少し影を減らす */
    transform: translateY(0); /* クリック時は元の位置に */
}





@media screen and (max-width: 450px) {
    /* 背景の黒い部分を取り除く */
    .popup-wrapper {
        height: 100vh; /* 画面全体をカバー */
        overflow-y: auto; /* 全体をスクロール可能に */
        padding: 0; /* 余白をなくす */
    }

    /* ポップアップ全体の調整 */
    .popup {
        height: 100vh; /* 画面全体を使う */
        max-height: 100vh; /* 高さを画面に合わせる */
        padding: 5%; /* パディングを最小限に */
        overflow-y: auto; /* 内部のスクロールを許可 */
        box-sizing: border-box; /* パディングを高さに含める */
    }

    /* 全体のレイアウトを縦並びに変更 */
    .all {
        display: flex;
        flex-direction: column;
        padding: 5%; /* コンテンツのパディングを保持 */
        word-wrap: break-word;
        word-break: break-all;
    }

	
	/* スライドコンテナの調整 */
    .popup-mainpic-container {
        width: 100%; /* 横幅100% */
		height: 400px;
        position: relative;
        overflow: hidden;
        display: flex; /* 横並びにする */
        flex-wrap: nowrap; /* 折り返しなし */
    }

    /* スライドの画像調整 */
    .popup-mainpic {
        width: 100%; /* 横幅100% */
        object-fit: cover; /* アスペクト比を保ちながらカバー */
        transition: transform 0.5s ease-in-out;
        flex-shrink: 0; /* 横並びで縮小させない */
    }

    /* 現在表示中のスライド */
    .popup-mainpic.active {
        transform: translateX(0);
    }

    /* 前のスライドの位置 */
    .popup-mainpic.previous {
        transform: translateX(-100%);
    }

    /* 次のスライドの位置 */
    .popup-mainpic.next {
        transform: translateX(100%);
    }
	

    /* インフォメーションの位置調整 */
    .right {
        padding-top: 0;
        margin-top: 20px;
    }

    /* フォントサイズの調整 */
    .popup-title {
        font-size: 20px; /* タイトルのフォントサイズをpxに調整 */
    }

    .area-tag-shimogo-p,
    .area-tag-hinoemata-p,
    .area-tag-tadami-p,
    .area-tag-minamiaizu-p {
        font-size: 16px; /* タグのフォントサイズをpxに調整 */
        padding: 8px 16px; /* パディングもpxに調整 */
    }

    .popup-p {
        font-size: 16px; /* 説明文のフォントサイズをpxに調整 */
        line-height: 24px; /* 行間を広くして見やすく */
    }

    .kaisaikikan {
        font-size: 16px; /* 開催期間のフォントサイズをpxに調整 */
        padding: 8px 20px; /* パディングをpxに調整 */
    }

    .contact {
        font-size: 16px; /* 連絡先のフォントサイズをpxに調整 */
        margin-top: 20px; /* マージンをpxに調整 */
    }

    /* ボタンのフォントサイズとパディングを調整 */
    .next-popup,
    .close-popup {
        font-size: 16px; /* ボタンのフォントサイズをpxに調整 */
        padding: 8px 20px; /* パディングをpxに調整 */
        top: 10px; /* ボタンの位置を調整 */
    }

    /* 不要な背景模様を非表示 */
    .popup01,
    .popup02,
    .popup03 {
        display: none;
        z-index: -1;
    }
}

@media screen and (min-width: 768px) {
  .all {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 左右のカラムを等しく2分割 */
    gap: 5%; /* leftとrightの間にスペースを追加 */
  }
}