@font-face {
	     font-family: 'ZenMaruGothic-Black';
	     src: url('../Font/ZenMaruGothic-Black.ttf');
	   }
		 @font-face {
	     font-family: 'ZenMaruGothic-Bold';
	     src: url('../Font/ZenMaruGothic-Bold.ttf');
	   }
		 @font-face {
			 font-family: 'ZenMaruGothic-Light';
			 src: url('../Font/ZenMaruGothic-Light.ttf');
		 }
		 @font-face {
			 font-family: 'ZenMaruGothic-Medium';
			 src: url('../Font/ZenMaruGothic-Medium.ttf');
		 }
		 @font-face {
			 font-family: 'ZenMaruGothic-Regular';
			 src: url('../Font/ZenMaruGothic-Regular.ttf');
		 }


   @font-face {
     font-family: 'MPLUSRounded1c-Bold';
     src: url('../Font/MPLUSRounded1c-Bold.ttf');
   }
   @font-face {
     font-family: 'MPLUSRounded1c-Black';
     src: url('../Font/MPLUSRounded1c-Black.ttf');
   }
   @font-face {
     font-family: 'MPLUSRounded1c-ExtraBold';
     src: url('../Font/MPLUSRounded1c-ExtraBold.ttf');
   }
   @font-face {
     font-family: 'MPLUSRounded1c-Light';
     src: url('../Font/MPLUSRounded1c-Light.ttf');
   }
   @font-face {
     font-family: 'MPLUSRounded1c-Medium';
     src: url('../Font/MPLUSRounded1c-Medium.ttf');
   }
   @font-face {
     font-family: 'MPLUSRounded1c-Regular';
     src: url('../Font/MPLUSRounded1c-Regular.ttf');
   }
   @font-face {
     font-family: 'MPLUSRounded1c-Thin';
     src: url('../Font/MPLUSRounded1c-Thin.ttf');
   }

   .f1 {
     font-family: 'MPLUSRounded1c-Bold', sans-serif;
   }
   .f2 {
     font-family: 'MPLUSRounded1c-Light', sans-serif;
   }
   .f3 {
     font-family: 'MPLUSRounded1c-Thin', sans-serif;
   }
   .f4 {
     font-family: 'MPLUSRounded1c-Black', sans-serif;
   }
   .f5 {
     font-family: 'MPLUSRounded1c-ExtraBold', sans-serif;
   }
   .f6 {
     font-family: 'MPLUSRounded1c-Medium', sans-serif;
   }
   .f7 {
     font-family: 'MPLUSRounded1c-Regular', sans-serif;
   }












    body {
   overflow-x: hidden;
    }
    /* トグルボタン */
    .menu-toggle {
    	font-size: 30px;
    	cursor: pointer;
    	background: none;
    	border: none;
    	padding: 10px 15px 9px 14px;
    	border-radius: 15px;
    	background-color: #fe50ff;
    	color: #e6e0e0;
    	position: fixed;
      right: 20px; /* 右端からの距離を調整 */
      top: 20px; /* 必要に応じて位置を調整 */
    }

    /**スマホ画面でのメニュー関係　・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・*/
    /* ポップアップ全体のスタイル */
    /* ポップアップの全体のスタイル */
    .popup {
			display: none;
			position: fixed;
			top: 0; /* ヘッダーと重ならないように位置調整 */
			left: 0;
			width: 100%;
			padding: 20px; /* コンテンツを画面内に収める */
			background-color: rgba(0, 0, 0, 0.7);
			z-index: 9999;
			justify-content: center;
			align-items: flex-start; /* 上部に揃える */
			animation: fadeIn 0.5s ease-in-out;
			height:100vh;
    }

    .popup-content {
        background: linear-gradient(120deg, #fffb1ed6, #ecf3a0);
        color: white;
        font-family: 'Roboto', sans-serif;
        width: 90%;
        max-width: 400px;
        max-height: 85vh; /* 全体を画面内に収める */
        overflow-y: auto;
        border-radius: 16px;
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4);
        padding: 20px;
        margin-top: 20px; /* ヘッダーとの間隔を確保 */
        text-align: center;
        position: relative;
    }

    /* レスポンシブ対応 */
    @media (max-width: 768px) {
        .popup-content {
            margin-top: 15px; /* モバイル用の余白 */
        }
    }
    es fadeIn {
        from {
            opacity: 0;
            transform: translateY(-50%);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    .popup-content::-webkit-scrollbar {
        width: 8px; /* スクロールバーの幅 */
    }

    .popup-content::-webkit-scrollbar-thumb {
        background-color: #1e90ff; /* スクロールバーの色 */
        border-radius: 4px; /* 丸みを追加 */
    }

    .popup-content::-webkit-scrollbar-track {
        background-color: #f5f5f5; /* スクロールバーの背景 */
    }

    .popup-content::-webkit-scrollbar {
        width: 8px; /* スクロールバーの幅 */
    }

    .popup-content::-webkit-scrollbar-thumb {
        background-color: #1e90ff; /* スクロールバーの色 */
        border-radius: 4px; /* 丸みを追加 */
    }

    .popup-content::-webkit-scrollbar-track {
        background-color: #f5f5f5; /* スクロールバーの背景 */
    }
    @media (max-height: 600px) {
        .popup-content {
            max-height: 80vh; /* 高さをさらに縮小 */
        }
    }

    /* 閉じるボタン */
    .close-btn {
        position: absolute;
        top: 15px; /* メニューより高い位置に配置 */
        right: 15px;
        font-size: 1.8rem;
        width: 40px;
        height: 40px;
        background-color: #ff7f50; /* ボタンの背景色 */
        color: white;
        border-radius: 50%;
        border: 2px solid white;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        z-index: 10000; /* ボタンを最前面に */
        transition: background-color 0.3s ease, transform 0.3s ease;
    }

    .close-btn:hover {
        background-color: #e74c3c; /* ホバー時の強調色 */
        transform: scale(1.1); /* 少し拡大 */
    }

    .close-btn:active {
        transform: scale(0.95); /* クリック時に縮小 */
        background-color: #c0392b; /* クリック時の背景色 */
    }

    /* メニュー */
    .popup-content nav {
        margin-top: 50px; /* 「×」ボタンとの重なりを防ぐための余白 */
    }

    @media (max-width: 768px) {
        .close-btn {
            top: 10px; /* モバイル画面での高さ調整 */
            right: 10px;
        }

        .popup-content nav {
            margin-top: 10px; /* モバイル用余白 */
        }
    }

    /* 画像リンクセクションのスタイル */
    .image-links {
        display: grid; /* グリッドレイアウトを使用 */
        grid-template-columns: repeat(2, 1fr); /* 2列に設定 */
        gap: 15px; /* 各画像間の間隔 */
        justify-content: center; /* 中央揃え */
        margin: 20px 0; /* 上下に余白を追加 */
    }

    .image-links a img {
        width: 100%; /* 幅を親要素に合わせる */
        max-width: 120px; /* 最大幅を設定 */
        height: auto; /* アスペクト比を維持 */
        border-radius: 8px; /* 角丸を追加 */
        transition: transform 0.3s ease, opacity 0.3s ease; /* ホバーアニメーション */
    }

    .image-links a img:hover {
        transform: scale(1.05); /* ホバー時に少し拡大 */
        opacity: 0.8; /* ホバー時に透明度を追加 */
    }

    /* SNSリンクセクションのスタイル */
    .sns-links {
        display: flex; /* フレックスボックスで横並び */
        justify-content: center; /* 中央揃え */
        gap: 15px; /* 各アイコンの間隔 */
        margin-top: 20px; /* 余白を追加 */
    }

    .sns-links img {
        width: 40px; /* アイコンの幅 */
        height: 40px; /* アイコンの高さ */
        object-fit: cover; /* 比率を維持 */
        transition: transform 0.3s ease, opacity 0.3s ease; /* ホバーエフェクト */
    }

    .sns-links img:hover {
        transform: scale(1.1); /* ホバー時に拡大 */
        opacity: 0.8; /* ホバー時に透明度を追加 */
    }



    /* メニュー項目のスタイル */
    .popup-content nav ul {
        list-style: none;
        padding: 0;
    }

    .popup-content nav ul li {
        margin: 10px 0;
    }

    .popup-content nav ul li a {
        display: flex; /* アイコンとテキストを並べる */
        align-items: center; /* 縦方向に中央揃え */
        gap: 10px; /* アイコンとテキストの間隔 */
        text-decoration: none;
        font-size: 18px;
        color: #500000;
        padding: 10px 15px;
        border-radius: 8px;
        background-color: #f7fff6;
        transition: background-color 0.3s ease, transform 0.3s ease;
    		font-size: 14px;
    }

    .popup-content nav ul li a:hover {
        background-color: #ff7f50; /* ホバー時のアクセントカラー */
        transform: scale(1.05); /* ホバー時に少し拡大 */
    }

    /* アイコンのスタイル */
    .popup-content nav ul li a img {
        width: 28px; /* 統一されたアイコンサイズ */
        height: 28px; /* 統一されたアイコンサイズ */
        object-fit: cover; /* 比率を保持しながらフィット */
        border-radius: 50%; /* アイコンを丸くする */
        margin-right: 10px;
    }


    /* サブメニューのスタイル */
    .submenu3 {
        display: none; /* 初期状態で非表示 */
        margin-top: 10px;
        padding-left: 15px;
        border-left: 2px solid #ddd; /* 視覚的な区切り線 */
        overflow: hidden; /* 隠れる状態 */
        max-height: 0; /* 高さをゼロに */
        transition: max-height 0.3s ease-in-out; /* 開閉アニメーション */
    }

    .submenu3.open {
        display: block; /* 表示する */
        max-height: 430px; /* 必要な高さ */
        background-color: #5f966ea3;
    border-radius: 10px;
    padding: 3px;
    }

    .submenu3 li {
        margin: 5px 0;
    }

    .submenu3 li a {
        display: block;
        text-decoration: none;
        font-size: 14px;
        color: #333;
        padding: 8px 12px;
        border-radius: 6px;
        transition: background-color 0.3s ease, color 0.3s ease;
    }

    .submenu3 li a:hover {
        background-color: #74b9ff; /* ホバー効果 */
        color: white;
    }

    /* レスポンシブ対応 */
    @media (max-width: 768px) {
        .popup-content {
            font-size: 1rem; /* フォントサイズを調整 */
            padding: 15px;
        }

        .menu-item3 > a {
            font-size: 16px; /* メニュー項目の文字サイズを調整 */
        }

        .submenu3 {
            position: static; /* スマホ画面で位置固定を解除 */
        }


    }
    .menu-toggle {
      display: none; /* デフォルトで非表示 */
    }

    @media (max-width: 767px) {
      .menu-toggle {
        display: block; /* 画面幅が767px以下のとき表示 */
      }
    }

    @keyframes fadeSlideIn {
      0% {
        opacity: 0;
        transform: translateY(-30px) scale(0.95);
      }
      100% {
        opacity: 1;
        transform: translateY(0) scale(1);
      }
    }
    .Midashi {
      opacity: 0;
      transform: translateY(-30px) scale(0.95);
      transition: opacity 0.3s, transform 0.3s;
    }

    .Midashi.animate {
      animation: fadeSlideIn 1s ease-out;
      opacity: 1;
      transform: translateY(0) scale(1);
    }



		.breadcrumb {
		    z-index: 1;
		position: absolute;
		top: 70px;
		display: flex;
		flex-wrap: wrap;
		list-style: none;
		}

		.breadcrumb li:not(:last-of-type)::after {
		content: "»";
		margin: 0 .6em; /* 記号の左右の余白 */
		color: #777; /* 記号の色 */
		}


		@media (max-width: 768px) {
			.breadcrumb {
			    z-index: 1;
			position: absolute;
			top: 2px;
			display: flex;
			flex-wrap: wrap;
			list-style: none;
			}
		}




		#slideshow {
			position: relative;
		}

		#slideshow img {
			position: absolute;
			top: 0;
			left: 0;
			transition: opacity 1s;
		}
		@media (min-width: 1200px) {
		.container {
				max-width: 1200px;
		}
	}


	.fade-in {
	  opacity: 0;
	  transition: opacity 1.5s ease-in-out;
	}

	.fade-in.visible {
	  opacity: 1;
	}


	.animate {
	    /*opacity: 0;*/
	    transform: translateY(20px);
	    transition: opacity 0.5s ease, transform 0.5s ease;
	}
	.text-white {
	    color: #000000 !important;
	}
	.bg-info {
	    background-color: #40f62e !important;
	}
	.gallery2{
	columns: 4;/*段組みの数*/
	padding:0 15px;/*ギャラリー左右に余白をつける*/
	margin:0;
	}

	.gallery2 li {
	    margin-bottom: 10px;/*各画像下に余白をつける*/
	list-style:none;
	}

	/*ギャラリー内のイメージは横幅100%にする*/
	.gallery2 img{
		width:100%;
		height:auto;
		vertical-align: bottom;/*画像の下にできる余白を削除*/}

	/*　横幅900px以下の段組み設定　*/
	@media only screen and (max-width: 900px) {
		.gallery2{
		columns:3;
		}
	}

	@media only screen and (max-width: 768px) {
		.gallery2{
		columns: 2;
		}
	}
	.news__item2 {
	  padding: 10px;
	  display: flex;
	  justify-content: center;
	  align-items: center;
	}