@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{
	font-family: "Zen Maru Gothic", serif;
	color="#3A2516"
}
h2{
	font-family: "PT Sans", sans-serif;
	color="#3A2516"
}
h3,
h4{
	font-family: "Zen Maru Gothic", serif;
	color="#3A2516"
}
h5 {
  margin: 0px;
  padding: 0px;
  font-weight: normal;
}

body {
  color: #3A2516;
  font-family:;
  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;
}
lu{
	font-family: "Zen Kaku Gothic New", sans-serif;
	color="#3A2516"
}

.pt-sans-bold {
  font-family: "PT Sans", sans-serif;
  font-weight: 700;
  font-style: normal;
}

p{
	font-family: "PT Sans", sans-serif;
	color="#3A2516"
}

#wrapper {
  overflow: hidden;
}

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




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

.section{
	position: relative;
}



/* TOP画像 */
.top-mein-pic {
  position: relative;
  width: 100%;
  padding-top: 75%; /* 4:3のアスペクト比に基づく */
  overflow: hidden;
  top: -70px;
}

.top-pic {
  opacity: 0.7;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* 動画のアスペクト比を維持しつつ、コンテナにフィット */
}

/* main-logoを動画の中央に重ねて表示 */
.main-logo {
  position: absolute;
  top: 50%; /* 縦方向の中央 */
  left: 50%; /* 横方向の中央 */
  transform: translate(-50%, -50%); /* 正確に中央に配置 */
  z-index: 2; /* ロゴを動画の前面に表示 */
  width: 25%; /* ロゴのサイズを調整 */
  pointer-events: none; /* ロゴがクリックなどに干渉しないように */
  opacity: 0; /* 初期状態では透明 */
  animation: fadeIn 2s forwards; /* 2秒間でフェードイン */
}

/* フェードイン用のアニメーション */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* フェードアウト用のアニメーション */
@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

/* wavy-lineを動画の下部に半分重ねて表示 */
.wavy-line {
  position: absolute;
  bottom: -20%; /* 波線の位置を動画の下に半分重ねる */
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  z-index: 1; /* 動画の上に表示 */
}



/* .main-wallのスタイル */
.main_wall-left{
	position: relative;
	margin-top: 5vw;
}
.main-wall {
    display: flex;
    flex-direction: row;
    justify-content: flex-start; /* 必要に応じて調整可能 */
    width: 60vw;
    margin-top: -15vw;
	padding-left: 5%;
    position: relative;
    z-index: 2; /* .wavy-lineの下に表示 */
}



/* 各画像の自由な配置 */
.pic01 {
    position: absolute;
    width: 14vw; /* ビューポート幅に基づいて動的に変更 */
    top: -6vw;   /* 動的な位置指定 */
    left: 8vw;
	z-index: 3; /* .main-wallの上に表示するためにz-indexを設定 */
}

.pic02 {
    position: absolute;
    width: 9vw;
    top: 0vw;
    left: 41vw;
	z-index: 3; /* .main-wallの上に表示するためにz-indexを設定 */
}

.pic03 {
    position: absolute;
    width: 13vw;
    top: 22vw;
    left: 6vw;
	z-index: 3; /* .main-wallの上に表示するためにz-indexを設定 */
}

.pic04 {
    position: absolute;
    width: 13vw;
    top: 27vw;
    left: 29vw;
	z-index: 3; /* .main-wallの上に表示するためにz-indexを設定 */
}

.pic05 {
    position: absolute;
    width: 9vw;
    top: 20vw;
    left: 52vw;
	z-index: 3; /* .main-wallの上に表示するためにz-indexを設定 */
}


.top_font{
	position: relative;	
}

.main-title{
	position: absolute;
	width: 12.5vw;
    top: -34vw;
    left: 22.5vw;
	z-index: 3;
}

/* title01, title02, title03 の共通スタイル */
.title01, .title02, .title03, .title01_en, .title03_en {
    position: absolute; /* 絶対位置で配置 */
    width: 100%; /* 横幅を100%に */
    text-align: center; /* テキストを中央揃え */
    z-index: 3; /* 他の要素の上に重ねる */
}

/* title01 の位置調整 */
.title01 {
    font-size: 2.1vw;
    font-weight: bold;
    letter-spacing: 0.2em;
    top: -30.5vw; /* 位置を調整して表示 */
    left: -18vw;
}

.title01_en {
    font-size: 2vw;
    font-weight: bold;
    top: -30.5vw; /* 位置を調整して表示 */
    left: -19vw;
}

/* title02 の位置調整 */
.title02 {
    font-size: 1.6vw;
    font-weight: bold;
    letter-spacing: 0.1em;
    top: -26vw; /* .title01より下に配置 */
    left: -18vw;
}

/* title03 の位置調整 */
.title03 {
    font-size: 1.2vw;
    line-height: 1.6;
    top: -23vw; /* .title02より下に配置 */
    left: -18vw;
}

.title03_en {
    font-size: 1vw;
    line-height: 1.4;
    top: -23vw; /* .title02より下に配置 */
    left: -18vw;
}

/* .main_wall-right のスタイル */
.main_wall-right {
    position: relative; /* 相対位置で全体の配置を管理 */
    z-index: 3; /* .main_wall-leftと同じレイヤーで表示 */
}

/* right-up の配置 */
.right-up {
    position: absolute; /* 自由に配置 */
    width: 40vw; /* 必要に応じてサイズ調整 */
    top: -48vw; /* 動的に調整 */
    left: 58vw;
    z-index: 3; /* 他の要素の上に重ねて表示 */
}

/* right-down の配置 */
.right-down {
    position: absolute; /* 自由に配置 */
    width: 30vw;
    top: -18vw;
    left: 60vw;
    z-index: 3; /* 他の要素の上に重ねて表示 */
}




/* .separator01 のスタイル */
.separator01 {
    position: relative; /* フロー内で配置されるようにrelativeを使用 */
    padding-top: 10%; /* 上部に少し余白を追加 */
	padding-bottom: 10%;
    width: 100%; /* 幅を100%にして横いっぱいに表示 */
    padding-left: 10%;
    padding-right: 10%;
    z-index: 2; /* 他の要素と干渉しないようにz-indexを設定 */
}


@media screen and (max-width: 768px) {
    /* main_wall-leftのスタイルをスマホ向けに調整 */
    .main_wall-left {
        display: block;
        width: 100%;
        margin: 0 auto;
        padding: 0;
        position: relative;
		padding-top: 5%;
    }

    /* main-wall のスタイルをスマホ向けに中央揃え */
    .main-wall {
        width: 100%;
        margin: 0 auto;
        padding-left: 5%;
        padding-right: 5%;
        position: relative;
    }

    /* 各画像のスタイルを中央に寄せ、スマホ向けに調整 */
    .pic01, .pic02, .pic03, .pic04, .pic05 {
        position: relative;
        width: 40%; /* 2.5枚表示のために40%に調整 */
        top: auto;
        left: auto;
    }

    /* .pic5クラスを使用して、5枚の画像をカルーセル表示 */
    .pic5 {
        display: flex;
        overflow: hidden; /* カルーセル用にオーバーフローを隠す */
        width: 100%;
        margin: 0 auto;
        position: relative;
        justify-content: flex-start; /* 左に寄せる */
		scroll-behavior: smooth; /* スムーズなスクロールの追加 */
		top: 25vh;
    }

    /* 各画像のスタイルをスマホ向けに調整 */
    .pic5 li {
        flex-shrink: 0;
        width: 39%; /* 画像が2.5枚表示されるように幅を少し狭める */
        margin-right: 1%; /* 画像間に少しスペースを追加 */
        transition: transform 0.5s ease-in-out; /* スムーズなアニメーション */
    }

    .pic5 li:last-child {
        margin-right: 0; /* 最後の画像にはスペースを追加しない */
    }

    .pic5 img {
        width: 100%; /* 親要素（li）の幅に合わせる */
        height: auto;
    }

    /* カルーセルのナビゲーションボタンの追加 */
    .carousel-btn {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        background-color: rgba(0, 0, 0, 0.5);
        color: #fff;
        padding: 10px;
        cursor: pointer;
        z-index: 10;
		border: none;
    	outline: none;
    	font-size: 1.5rem; /* ボタンのサイズを大きく */
    	border-radius: 5px; /* ボタンを丸く */
    }

    .carousel-btn.left {
        left: 10px;
    }

    .carousel-btn.right {
        right: 10px;
    }

    /* ボタンをPC表示で非表示に */
    @media screen and (min-width: 769px) {
        .carousel-btn {
            display: none;
        }
    }

    /* main-title の位置を中央揃えに変更 */
    .main-title {
        position: relative;
        width: 150px;
        margin: 0 auto;
        top: -100vw;
        left: 45%;
        transform: translate(-50%, -50%);
    }

    /* title01, title02, title03 の位置を中央揃え */
    .title01, .title02, .title03, .title01_en, .title03_en {
        position: relative;
		left: 0;
        text-align: center;
        margin: 10px auto;
    }
    .title01 {
        top: -110vw;
		font-size: 25px;
    }
	.title01_en {
        top: -105vw;
		font-size: 20px;
    }
    .title02 {
        top: -110vw;
		font-size: 18px;
    }
    .title03 {
        top: -105vw;
		font-size: 16px;
		line-height: 1.5;
		padding-left: 10%;
		padding-right: 10%;
    }
	.title03_en {
        top: -105vw;
		font-size: 14px;
		line-height: 1;
		padding-left: 10%;
		padding-right: 10%;
    }
	
	
	.hide-on-small {
    display: none;
  } 
	
	.main_wall-right {
		position: relative;
		top: 10vh;
	}
	
	
    /* right-up, right-down のスタイルをスマホ向けに中央寄せ */
    .right-up, .right-down {
        position: relative;
        width: 100%;
        margin: 10px auto; /* 上下に余白を追加して中央寄せ */
        left: 0;
        padding-left: 5%;
        padding-right: 5%;
    }

    /* separator01 のスタイルをスマホ向けに調整 */
    .separator01 {
        width: 100%;
        margin: 20px auto;
        padding-left: 5%;
        padding-right: 5%;
    }
}







/* TOURISM 観光情報 */
.text-container {
    display: inline-flex;
    align-items: baseline;
    border-bottom: 2px solid black; /* 下線を全体に引く */
	margin-left: 10%;
	margin-right: 10%;
}

.title_info {
	font-size: 40px;
	font-weight: bold;
    margin: 0 20px 0 0; /* 右にスペースを追加 */
}

.info {
    font-size: 18px;
	font-weight: bold;
	letter-spacing: 0.1vw;
    margin: 0; /* h3のデフォルトマージンを無効化 */
}

@media (max-width: 768px) {
	.title_info {
	font-size: 30px;
	}
	.info {
    font-size: 14px;
	}
}


/* 全体のレイアウト */
.top-tourism {
	position: relative;
	display: block; /* 他要素と重ならないようにする */
}

/* TOURISM テキスト */
/* .top-tourism-title01 と .tourism-group の隙間を開ける */
.top-tourism-title01 {
    font-size: 16px;
    letter-spacing: 0.1em;
    line-height: 1.2;
    max-width: 100%;
    height: auto;
    margin-top: 1%;
    margin-left: 10%;
	margin-right: 10%;
    clear: both; /* 他の要素と重ならないようにする */
    margin-bottom: 5vw; /* 下に余白を追加 */
}

/* .tourism-group の調整 */
.tourism-group {
    position: relative;
    margin-top: -15vw; /* tourism-title01との間に余白を確保 */
}


/* 背景（最下層） */
.top-tourism02 {
    position: absolute;
    z-index: 1;
    max-width: 90%;
    height: auto;
    top: 12vw;
    left: 0;
}

/* 中間層の画像 */
.top-tourism03, .top-tourism04, .top-tourism05, .top-tourism06 {
    position: absolute;
    z-index: 9;
    max-width: 24%;
    height: auto;
}

/* 位置調整 */
.top-tourism03 { top: 23vw; left: 11vw; }
.top-tourism04 { top: 19vw; left: 56vw; }
.top-tourism05 { top: 51vw; left: 24vw; }
.top-tourism06 { top: 48vw; left: 63.5vw; }

/* 最前面のボタン */
.tourism-spring-button, .tourism-summer-button, .tourism-autumn-button, .tourism-winter-button {
    position: absolute;
    z-index: 10;
    width: 10%;
    height: auto;
}

/* ボタン位置調整 */
.tourism-spring-button { top: 18vw; left: 10vw; }
.tourism-summer-button { top: 14vw; left: 68vw; }
.tourism-autumn-button { top: 60vw; left: 19vw; }
.tourism-winter-button { top: 42vw; left: 78vw; }

/* その他の要素 */
.top-more01-container {
    text-align: right; /* コンテナ内の要素を右寄せにする */
}
.top-more01 {
    position: relative;
    width: 100px;
    height: auto;
    top: 70vw;
	margin-right: 10%;
    z-index: 10; /* 手前に表示するためにz-indexを調整 */
}

/* セパレータ */
.separator02 {
    position: relative;
    z-index: 4;
    width: 100%;
	padding-left: 10%;
	padding-right: 10%;
	margin-bottom: 10%;
    padding-top: 75vw; /* 上の要素との間に余白を追加 */
}








/* EVENTS イベント情報 */
.top-events{
	position: relative;
	margin-top: 1%;
	padding-left: 10%;
	padding-right: 10%;
	margin-bottom: 10%;
}

.top-events-title01{
	font-size: 16px;
	letter-spacing: 0.1em;
	line-height: 1.2;
	width: 100%;
	height: auto;
}

.top-events02{
	position: absolute;
    max-width: 90%;
	height: auto;
	top: -5vw;
	left: 1vw;
	z-index: -1;
}
.top-events-pic{
	position: relative;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1vw; /* 画像間に隙間を設ける */
	top: 6vw;
	margin-left: 10%;
	width: 90%;
}
@media (max-width: 970px) {
	.top-events-pic {
		grid-template-columns: repeat(2, 1fr);
		gap: 2vw;
		margin-left: 5%;
		width: 90%;
	}
}

.picpic{
	width: 30vw;
	height: auto;
	aspect-ratio: 3 / 5; /* 画像のアスペクト比を指定 */
	object-fit: cover; /* 画像のアスペクト比を保ちながら枠にフィット */
	overflow: hidden;
	border-radius: 10px; /* 画像の角を丸くする */
}

.button-index{
	width: 20px;
}

.title-index{
	font-size: 16px;
	white-space: nowrap;
	text-align: left; /* テキストを左詰めにする */
}

.sub-index{
	font-size: 12px;
	letter-spacing: 0.1vw;
	text-align: left; /* テキストを左詰めにする */
}



.top-more02{
	position: relative;
    width: 100px;
	height: auto;
	margin-right: 10%;
}



/* NEWS 新着ニュース */
.news-section {
	width: 100%;
    margin: 10% 0;
    padding: 10% 10%;
    background-color: rgba(0, 182, 206, 0.2);
}

.text-container_n {
    display: inline-flex;
    align-items: baseline;
    border-bottom: 2px solid #545454; /* 下線を全体に引く */
	margin-left: 0%;
}

.title_info_n {
	font-size: 40px;
	font-weight: bold;
    margin: 0 20px 0 0; /* 右にスペースを追加 */
}

.info_n {
    font-size: 18px;
	font-weight: bold;
	letter-spacing: 0.1vw;
    margin: 0; /* h3のデフォルトマージンを無効化 */
}

@media (max-width: 768px) {
	.title_info_n {
	font-size: 30px;
	}
	.info_n {
    font-size: 14px;
	}
}

.top-news-title01{
	font-size: 16px;
	letter-spacing: 0.1em;
	line-height: 1.2;
	max-width: 100%;
	height: auto;
	margin-top: 1%;
}

.news-item {
    border-bottom: 1px dashed #545454;
    padding: 15px 0;
}

.news-item:last-child {
    border-bottom: none;
}

.news-item a {
    font-size: 16px;
    color: #545454;
    text-decoration: none; /* リンクの下線を削除します（必要に応じて） */
    margin-top: 0; /* 上部のマージンを0に設定します */
    margin-bottom: 10px; /* 追加したいスペースがある場合に調整 */
    display: block; /* リンクをブロック要素にして、行の下に表示 */
	word-break: break-all; /* 長いURLなどで行が崩れないようにする */
}

.label {
    font-size: 12px;
    color: #fff;
    background-color: #ff6347;
    padding: 2px 6px;
    border-radius: 3px;
    margin-right: 5px;
}

.label.attention {
    background-color: #ffcc00;
}

.date, .content {
    display: block; /* これにより、<b>タグがブロック要素のように振る舞います */
    margin-bottom: 10px; /* 必要に応じて間隔を調整します */
}


.date {
    font-size: 14px;
    color: #545454;
	margin-top: 5px;
    margin-bottom: 5px;
	letter-spacing: 0.2vw;
}

.content {
    font-size: 16px;
    color: #545454;
	margin-bottom: 0; /* マージンを0に設定して行間を詰めます */
    line-height: 1.2; /* 行間を狭くするためのline-heightを設定します */
}

/* ポップアップのスタイル */
        .popup-overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            justify-content: center;
            align-items: center;
			z-index: 999;
        }
        .popup-content {
            background-color: white;
            padding: 20px;
            border-radius: 5px;
            width: 80%;
            max-width: 500px;
            text-align: center;
        }
        .popup-content p {
            margin-bottom: 20px;
			line-height: 1.5;
        }
        .close-btn {
            padding: 10px 20px;
            background-color: #007bff;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }






/* SNS ソーシャルネットワークサービス */
.sns{
	position: relative;
	padding-top: 6%;
	padding-left: 10%;
	padding-right: 10%;
	padding-bottom: 5%;
}
.top-sns-title01{
	position: relative;
    width: 100%;
	height: auto;
	font-size: 16px;
	letter-spacing: 0.1em;
	line-height: 1.2;
	width: 100%;
	margin-top: -5vw;
}



/* ACCESS アクセス */
.title_info-a{
	font-size: 40px;
	font-weight: bold;
	margin: 10% 20px 0 0;
}

@media (max-width: 768px) {
	.title_info-a {
	font-size: 30px;
	}
	.info-a {
    font-size: 14px;
	}
}

.access {
    position: relative;
    padding-left: 10%;
	padding-right: 10%;
    padding-bottom: 5%;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
}

/* .accessセクション内のulにのみ適用 */
.access-ul01 {
    display: flex;
    margin-top: 5%;
    margin-left: 1%;
}

.access-table {
    width: 100%; /* テーブル全体の幅を設定 */
    margin-top: 2%;
    margin-left: 0;
    border-collapse: collapse; /* セル間の隙間をなくす */
}

.access-table td {
    padding: 5px 10px; /* セル内の余白を追加 */
    vertical-align: top; /* コンテンツを上に揃える */
}


.access03 {
    max-width: 20px;
    height: 20px;
}

.access04 {
    font-size: 20px;
    letter-spacing: 0.2em;
    max-width: 100%;
    height: auto;
}


.access05 {
    max-width: 16px;
    height: auto; /* 高さを自動調整 */
}

.access06 {
    padding-left: 1%;
    font-size: 16px;
    letter-spacing: 0.1em;
    line-height: 1.5;
    white-space: normal;
    flex-grow: 1;
}

.highlight {
    font-size: 16px;
    color: #BB1B21;
	background-color: transparent; /* 背景色を透明にしてリセット */
}

/* スマホ用のメディアクエリ */
@media (max-width: 768px) {
    .access {
        padding-left: 10%;
        padding-right: 5%;
        margin-top: 5%;
    }

    /* access03 と access04 の横並びを維持 */
    .access-ul01 {
        display: flex;
        align-items: center; /* 縦の位置を揃える */
        margin-left: 0;
        margin-right: 0;
        margin-top: 5%;
        white-space: normal; /* テキストを自動的に折り返すように変更 */
    }

    .access03 {
        width: 18px; /* サイズをスマホに合わせて調整 */
        height: 18px;
        margin-right: 8px; /* 画像とテキストの間に適切な余白を確保 */
    }

    .access04 {
        font-size: 18px; /* スマホでもバランスの取れたフォントサイズ */
        letter-spacing: 0.05em;
        max-width: 100%;
        word-wrap: break-word; /* 長い単語が折り返されるように変更 */
    }


    .access05 {
        width: 16px; /* サイズをスマホに合わせて調整 */
        height: 16px;
    }

    .access06 {
        font-size: 16px; /* スマホでもバランスの取れたフォントサイズ */
        letter-spacing: 0.05em;
        max-width: 100%;
        word-wrap: break-word; /* 長い単語が折り返されるように変更 */
    }
}







.map {
  	width: 100%;
	padding-left: 10%;
	margin-right: 10%;
	margin-bottom: 10%;	
}
.map iframe {
	position: relative;
    width: 90%;
}