@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;
   }



   /* トグルボタン */
   .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);
   }


   .MainMidashi {
       font-size: 27px;
       font-weight: bold;
       color: #FF6F61; /* 柔らかい赤色 */
       text-align: center;
       margin-bottom: 20px;
       border-bottom: 3px solid #FF6F61; /* 同じ色のボーダー */
       padding-bottom: 10px;

   }

   .SUBmidashi {
       font-size: 18px;
       font-weight: bold;
       background-color: #FFF5EE; /* やさしい背景色 */
       padding: 20px;
       border-radius: 12px;
       box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* かわいい影 */
       max-width: 400px;
       margin: 0 auto 30px auto;
       line-height: 1.8;
       text-align: left;
       color: #552202;

   }

   .SUBmidashi span {
       color: #FF6F61; /* 柔らかい赤色 */
       font-weight: bold;
   }

   .MainDetail {
   	color: #552202;
   background-color: #FFFAF0;
   padding: 20px;
   border-left: 5px solid #FFA726;
   margin: 20px auto;
   max-width: 600px;
   line-height: 1.5;
   border-radius: 8px;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
   font-size: 15px;
   font-weight: bold;
   }

   }


   /* ラインのスタイル */
   			 .line {
   					 width: 100%;
   					 height: 8px;
   					 background: linear-gradient(to right, #f06, #9f6);
   					 margin: 40px 0 0;
   			 }

   			 /* オプション: ラインのアニメーション */
   			 .line::before {
   					 content: "";
   					 display: block;
   					 width: 0;
   					 height: 8px;
   					 background: #f06;
   					 transition: width 0.3s ease;
   			 }

   			 .line:hover::before {
   					 width: 100%;
   			 }

   	 				@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans&display=swap');

   	 				.title20 {
   	 					overflow: hidden;
   	 					transform: translate(-100%, 0);
   	 					transition: transform cubic-bezier(0.25, 0.1, 0.25, 1) 1s; /* 速度を1sに変更し、cubic-bezierを変更 */
   	 					color: #aa8f7b;

   	 				}

   	 				.title20 span {
   	 					display: block;
   	 					transform: translate(100%, 0);
   	 					transition: transform cubic-bezier(0.25, 0.1, 0.25, 1) 1s; /* 速度を1sに変更し、cubic-bezierを変更 */
   	 				}

   	 				.title20.-visible,
   	 				.title20.-visible span {
   	 					transform: translate(0, 0);
   	 				}

   	 				.sentence {
   	 			/* overflow: hidden; この行を削除またはコメントアウトして初期状態では overflow の設定を行わない */
   	 			transform: translate(-100%, 0);
   	 			transition: transform cubic-bezier(0.25, 0.1, 0.25, 1) 1s;
   	 			font-weight: 500;
   	 			font-size: 16px;
   	 			text-align: center;
   	 		}

   	 		.sentence span {
   	 			display: block;
   	 			transform: translate(100%, 0);
   	 			transition: transform cubic-bezier(0.25, 0.1, 0.25, 1) 1s;
   	 		}

   	 		.sentence.-visible,
   	 		.sentence.-visible span {
   	 			transform: translate(0, 0);
   	 			overflow: hidden; /* アニメーションが開始されると同時に overflow を hidden に設定する */
   	 		}


   	 		@media only screen and (max-width: 600px) {
   	 	    /* スマートフォンの画面サイズ以下の場合のスタイル */

   	 	    .slideshow-container {
   	 	      display: none;
   	 	    }
   	 	  }



   			 .modal {
   			     display: none;
   			     position: fixed;
   			     z-index: 1;
   			     left: 0;
   			     top: 0;
   			     width: 100%;
   			     height: 100%;
   			     overflow: auto;
   			     background-color: rgba(0, 0, 0, 0.9);
   			 }

   			 .modal-content {
   			 	position: absolute;
   			     top: 50%;
   			     left: 50%;
   			     transform: translate(-50%, -50%);
   			     max-width: 80%;
   			     max-height: 80%;
   			 }

   			 .close {
   			 	position: absolute;
   			     top: 40px;
   			     right: 20px;
   			     color: white;
   			     font-size: 40px;
   			     font-weight: bold;
   			     cursor: pointer;
   			     padding: 10px;
   			 }

   			 .gallery {
   								display: flex;
   								flex-wrap: wrap;
   						}


   						#popup-container {
   			  display: none;
   			  position: fixed;
   			  top: 0;
   			  left: 0;
   			  width: 100%;
   			  height: 100%;
   			  background: radial-gradient(circle at center, rgba(255, 240, 245, 0.95), rgba(255, 220, 230, 0.9));
   			  z-index: 999;
   			  animation: fadeIn 0.5s ease-in-out;
   			}

   			#popup-image {
   			  max-width: 85%;
   			  max-height: 85%;
   			  position: absolute;
   			  top: 50%;
   			  left: 50%;
   			  transform: translate(-50%, -50%) scale(0.95);
   			  border-radius: 16px;
   			  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
   			  transition: transform 0.3s ease;
   			  animation: popImage 0.4s ease-out;
   			}

   			/* ふわっと表示されるアニメーション */
   			@keyframes fadeIn {
   			  from {
   			    opacity: 0;
   			  }
   			  to {
   			    opacity: 1;
   			  }
   			}

   			@keyframes popImage {
   			  0% {
   			    transform: translate(-50%, -50%) scale(0.7);
   			    opacity: 0;
   			  }
   			  100% {
   			    transform: translate(-50%, -50%) scale(1);
   			    opacity: 1;
   			  }
   			}



   			.buttons{
   				margin-top: 30px;
   				text-align: center;
   			}
   			.btn-flat-border {
   			display: inline-block;
   			padding: 0.3em 1em;
   			text-decoration: none;
   			color: #fff;
   			border: solid 2px #f5e9eb;
   			border-radius: 3px;
   			transition: .4s;
   			background-color: #49393C;
   			}

   			.btn-flat-border:hover {
   			background: #cf4878;
   			color: white;
   			}

   			.midashi{
   				font-size:3rem;
   			}
   			.descriptionR{
   			width: 900px;
   			}
   			/* スマートフォン向けのスタイル */
   			@media screen and (max-width: 768px) {

   				.midashi{
   					font-size:1.5rem;
   				}

   				.descriptionR{
   				width: 100%;
   				}
   			}

   			/* タブレット向けのスタイル */
   			@media screen and (min-width: 769px) and (max-width: 1024px) {

   				.descriptionR{
   				width: 100%;
   				}
   				.midashi{
   					font-size:2.5rem;
   				}
   			}



        .gallery {
          display: flex;
          flex-wrap: wrap;
          gap: 24px;
          justify-content: center;
          padding: 32px;
          background: linear-gradient(90deg, #e9e9e8ed, #f2d6e6d6);
          font-family: 'Noto Sans JP', sans-serif;

          /* スクロール対応追加 */
          max-height: 70vh;         /* ビューポートの高さ制限 */
          overflow-y: auto;         /* コンテンツがあふれたら縦スクロール */

        }
        .gallery::-webkit-scrollbar {
          width: 8px;
        }

        .gallery::-webkit-scrollbar-track {
          background: #f6f1f5;
          border-radius: 4px;
        }

        .gallery::-webkit-scrollbar-thumb {
          background-color: #d1a7c5;
          border-radius: 4px;
          border: 2px solid #f6f1f5;
        }

        .gallery-item {
        text-align: center;
        border-radius: 16px;
        overflow: hidden;
        background: linear-gradient(90deg, #fbff62, #f9eef8);
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.08);
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        max-width: 240px;
        }

        .gallery-item:hover {
        transform: translateY(-6px);
        box-shadow: 0 12px 20px rgba(0, 0, 0, 0.15);
        }

        .gallery-item img {
        width: 100%;
        height: auto;
        border-bottom: 1px solid #f0e9e3;
        }

        .gallery-item p {
        padding: 12px;
        font-size: 0.95rem;
        color: #6a4e3d;
        background: linear-gradient(90deg, #fbff62, #f9eef8);
        font-weight: 500;
        }
        @media (min-width: 1024px) {
          .gallery {

            margin: auto;
          }
          .gallery-item {
            flex: 1 1 calc(25% - 24px); /* 4列 */
          }
        }

        @media (min-width: 768px) and (max-width: 1023px) {
          .gallery-item {
            flex: 1 1 calc(33.333% - 24px); /* 3列 */
          }
        }

        @media (max-width: 767px) {
          .gallery-item {
            flex: 1 1 calc(50% - 24px); /* 2列 */
          }
        }


        .pb-5, .py-5 {
            padding-bottom: 1rem !important;
        }
        .h3, h3 {
            font-size: 22px;
        }







        .G1 {
          display: inline-block;
    padding: 3px 15px;
    margin-top: 30px;
    color: white;
    background-color: #3498db;
    text-align: center;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s, transform 0.3s;
        }

        .G1:hover {
          background-color: #251a79;
          transform: scale(1.05);
          color:#fff9f9;
        }




        .responsive-table {
          width: 100%;
          border-collapse: collapse;
        	font-size: 13px;
        }

        .responsive-table th,
        .responsive-table td {
          border: 1px solid #ddd;
          padding: 8px;
        }


        .responsive-table th {
          width: auto;
          white-space: nowrap;
        }

        @media screen and (max-width: 600px) {
          .responsive-table tr {
            display: block;
            margin-bottom: 15px;
          }

          .responsive-table th,
          .responsive-table td {
            display: block;
            text-align: left;
            padding: 8px;
            border: 1px solid #ddd;
          }

          .responsive-table th {
            background-color: #f2f2f2;
            font-weight: bold;
          }

          .responsive-table td {
            border-top: none;
          }
        }



        .fixed-link {
          position: fixed;
          bottom: 10px;
          right: 10px; /* 画面の右端に移動 */
          z-index: 1000; /* 他の要素の上に表示 */
          display: flex;
        }

        .fixed-link img {
          max-width: 110px;
          margin: 5px; /* 画像間のスペースを追加 */
          transition: transform 0.3s; /* アニメーションのスムーズな移動を設定 */
        }

        .fixed-link img:hover {
          transform: translateY(-15px); /* アイコンを上に10px移動 */
        }

        /* メディアクエリで画面幅が600ピクセル以下の場合 */
        @media (max-width: 600px) {
          .fixed-link img {
            max-width: 100px; /* サイズを小さく設定 */
          }
        }





        .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: #fff !important;
        }

        .nav-item {
          position: relative;
        }



          .fancy-heading {

            background-color: #fff;
            padding: 5px;
            border-radius: 10px;
            transition: transform 0.5s ease-in-out;
          }

          .animate {
            transform: scale(1.2);
          }


        	 .G2 {
        	     display: inline-block;
        	     padding: 5px 15px;
        	     /* margin-top: 0px; */
        	     color: white;
        	     background-color: #d171e9;
        	     text-align: center;
        	     text-decoration: none;
        	     border-radius: 5px;
        	     transition: background-color 0.3s, transform 0.3s;font-size: 13px;
        	 }
        	 .G2:hover {
        	   background-color: #cc2999;
        	   transform: scale(1.05);
        	 }