body {
            width: 100%;
			font-family: 'Arial', sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f4f4f4;
			font-size: 80%;
			font-weight: bold;
        }
		a {
		    text-decoration: none;
		}
        header {
			width: 100%;
            background-color: rgba(65, 105, 225, 1); /* 初期は完全な不透明 */
            color: #fff;
            text-align: center;
            padding: 20px;
            display: flex;
			 position: fixed;
            justify-content: space-between;
            align-items: center;
			z-index: 1000; /* 他の要素より手前に表示するためにz-indexを設定 */
			transition: background-color 0.3s ease; /* 色の変化をスムーズにする */
        
        }

		 .noback_colorred {
			width: 80%;
	        color: #ff0000;
			margin: 0 auto;
			padding: 10px 10px;
	    }
		 .paragraph {
			width: 80%;
	        background-color: #c0c0c0;
			margin: 0 auto;
			padding: 10px 10px;
	    }

       
		.logo {
			text-align: left;
            flex: 1; /* 可能な限りのスペースを占める */
        }
		.logo img{
			width: 45%;
		}

		.menu-img {
			text-align: right;
			margin: 0 30px 0 0;
            flex: 1; /* 可能な限りのスペースを占める */
        }
		.menu-img img{
			width: 50%;
		}

        nav {
            background-color: #2980b9;
            color: #fff;
			font-size: 150%;
            text-align: center;
            padding: 150px 10px 10px 10px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
		@media screen and (min-width: 1200px) {
			 nav {
                padding: 250px 10px 10px 10px;
            }
		}

        nav a {
            color: #fff;
            text-decoration: none;
            padding: 10px;
            margin: 0 10px;
            display: inline-block;
        }

        
		.osirase-container{
            padding: 20px;
			text-align: center;
        }
		.osirase-container p{
			color: #640125;
            border-top: 2px solid #640125; /* 上に線を引く */
     		border-bottom: 2px solid #640125; /* 下に線を引く */
		    padding: 10px 0; /* 上下の余白を追加 */
			font-weight: bold; /* テキストを太字にする */
        }

       

        #menu-icon {
			display: none;
            cursor: pointer;
			flex: 1; /* 可能な限りのスペースを占める */
            text-align: right;
			 font-size: 24px;
			margin: 0 30px 0 0;
        }

        #menu {
            display: none;
            flex-direction: column;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(255, 255, 255, 0.9); /* 背景を白く透明に */
            z-index: 1; /* 他の要素より上に表示 */
            justify-content: center;
            align-items: center;
			z-index: 9000; /* 他の要素より手前に表示するためにz-indexを設定 */
        }

        #menu.show {
            display: flex;
        }

        #menu a {
            color: #333;
            text-decoration: none;
            padding: 20px;
            margin: 0 10px;
            display: block;
            text-align: center;
        }

        #close-btn {
            position: absolute;
            top: 20px;
            right: 20px;
            color: #333;
            font-size: 24px;
            cursor: pointer;
        }

        /* Media query for responsive design */
        @media screen and (max-width: 780px) {
            .logo img{
				width: 60%;
			}

            nav {
                display: none;
            }

			.menu-img {
			display: none;
        }

            #menu-icon {
                display: block;
            }
        }

		
/********************************************************/
/* スライド画像 */
/********************************************************/

		.slider-container {
            position: relative;
            max-width: 100%;
			padding: 10px 0 0 0;
            overflow: hidden;
        }

        .slider {
            width: 100%;
            overflow: hidden;
        }

        .slides {
            display: flex;
            transition: transform 0.5s ease-in-out 1s; /**スライドの画像の待ち時間を変更する場合は最後のｓの前の数字を変える 下も一緒に！！ ***/
        }

        .slide {
            min-width: 100%;
            box-sizing: border-box;
        }

        .slide img {
            width: 100%;
            height: auto;
        }

        .prev, .next {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            font-size: 24px;
            color: #fff;
            cursor: pointer;
            background-color: rgba(0, 0, 0, 0.5);
            padding: 10px;
            border: none;
        }

        .prev {
            left: 20px;
        }

        .next {
            right: 20px;
        }

        .dot-container {
            text-align: center;
            margin-top: 20px;
        }

        .dot {
            height: 15px;
            width: 15px;
            margin: 0 5px;
            background-color: #bbb;
            border-radius: 50%;
            display: inline-block;
            transition: background-color 0.6s ease  1s;  /**スライドの画像の待ち時間を変更する場合は最後のｓの前の数字を変える ***/
            cursor: pointer;
        }

        .dot.active {
            background-color: #717171;
        }

        /* レスポンシブデザインの調整 */
        @media screen and (max-width: 780px) {
			.stickyHeader {
				position: fixed;
	        }
			.slider {
	            margin-top: 70px;
	        }
			
            .prev, .next {
                font-size: 16px;
            }

            .dot-container {
                margin-top: 10px;
            }

            .dot {
                height: 10px;
                width: 10px;
                margin: 0 3px;
            }
        }
/********************************************************/
/* スライド画像 　新しいやつ*/ 
/********************************************************/
/*------ スライダーの横幅 ------*/
.reslider{
 position: relative;
            max-width: 100%;
			padding: 10px 0 0 0;
            overflow: hidden;
}

/*------ スライダー画像 ------*/
.reslider img{
	width:100%;
}

/*-------- 高さ調整 ----------*/
.reslider .slick-slide{
	height:auto!important;
}

/*---------- 矢印 ----------*/
.reslider .slick-next{
    right:0!important;
}
.reslider .slick-prev{
    left:0!important;
}
.reslider .slick-arrow{
    width: initial!important;
    height: initial!important;
    z-index:2!important;
}
.reslider .slick-arrow:before{
    font-size: 30px!important;
}

.slick-dots{
    position: initial!important;
}
/* レスポンシブデザインの調整 */
@media screen and (max-width: 780px) {
	.stickyHeader {
				position: fixed;
	        }
	.reslider {
		padding-top: 90px;
    }
	.reslider .slick-next{
	    top:180px!important;
	}
	.reslider .slick-prev{
	    top:180px!important;
	}
    
}

/********************************************************/
 /* 真ん中のスタイル */
/********************************************************/
.container {
            max-width: 1200px;
            margin: 0 auto;
            display: flex;
            flex-wrap: wrap;
            margin-bottom: 20px; /* ここにmargin-bottomを追加 */
        }

        .item {
            width: 25%;
            padding: 10px;
            box-sizing: border-box;
            float: left;
        }
		 .item_4 {
             position: relative;
		    width: 23%;
		    font-size: 16px;
		    color: #FFF;
		    padding: 10px 30px 10px 10px;
		    text-align: center;
		    box-sizing: border-box;
		    margin: 10px;
		    float: left;
		    display: flex;
		    flex-direction: column;
		    justify-content: center;
		    align-items: center;
		    border-radius: 20px;
		    background: linear-gradient(to left, #000000 0%, #000000 10%, transparent 10%); /* 左から80%までのグラデーション */
        }
		.item_4:nth-child(1) {
		   
		  background-color: #003f8e; /* 青色の背景色を指定 */
		}

		.item_4:nth-child(2) {
		  background-color: #005c42; /* 緑色の背景色を指定 */
		}

		.item_4:nth-child(3) {
		  background-color: #e5a323; /* ｵﾚﾝｼﾞ色の背景色を指定 */
		}

		.item_4:nth-child(4) {
		  background-color: #003f8e; /* 青色の背景色を指定 */
		}

		.item_4::before {
		    content: "";
		    width: 0;
		    height: 0;
		    border-left: 10px solid ;
		    border-top: 10px solid transparent;
		    border-bottom: 10px solid transparent;
		    border-right: 10px solid transparent; /* 右向きの三角形 */
		    position: absolute;
		    top: 50%;
		    right: 0; /* 右端に寄せる */
		    transform: translateY(-50%);
		    z-index: 1;
		}
		
		 .item_3 {
            width: 33%;
            padding: 10px;
            box-sizing: border-box;
            float: left;
        }
		

		

		

		

		 .item_5 {
           position: relative;
		    width: 18%;
		    font-size: 16px;
		    color: #FFF;
		    padding: 10px 30px 10px 10px;
		    text-align: center;
		    box-sizing: border-box;
		    margin: 10px;
		    float: left;
		    display: flex;
		    flex-direction: column;
		    justify-content: center;
		    align-items: center;
		    border-radius: 20px;
		    background: linear-gradient(to left, #000000 0%, #000000 10%, transparent 10%); /* 左から80%までのグラデーション */
        }

		.item_5:nth-child(1) {
		   
		  background-color: #003f8e; /* 青色の背景色を指定 */
		}

		
		.item_5:nth-child(2) {
		  background-color: #005c42; /* 緑色の背景色を指定 */
		}

		.item_5:nth-child(3) {
		  background-color: #005c42; /* 緑色の背景色を指定 */
		}

		.item_5:nth-child(4) {
		  background-color: #e5a323; /* ｵﾚﾝｼﾞ色の背景色を指定 */
		}
		.item_5:nth-child(5) {
		  background-color: #003f8e; /* 青色の背景色を指定 */
		}


		.item_5::before {
		    content: "";
		    width: 0;
		    height: 0;
		    border-left: 10px solid ;
		    border-top: 10px solid transparent;
		    border-bottom: 10px solid transparent;
		    border-right: 10px solid transparent; /* 右向きの三角形 */
		    position: absolute;
		    top: 50%;
		    right: 0; /* 右端に寄せる */
		    transform: translateY(-50%);
		    z-index: 1;
		}

		/* 各要素ごとに色を指定 */
		.item_5:nth-child(1)::before {
		    border-bottom-color: #000000; /* 青色の背景色と合わせる */
		}

		.item_5:nth-child(2)::before,
		.item_5:nth-child(3)::before {
		    border-bottom-color: #000000; /* 緑色の背景色と合わせる */
		}

		.item_5:nth-child(4)::before {
		    border-bottom-color: #000000; /* オレンジ色の背景色と合わせる */
		}

		.item_5:nth-child(5)::before {
		    border-bottom-color: #000000; /* 青色の背景色と合わせる */
		}

		.item_2 {
            width:45%;
            padding: 10px;
			margin: 10px auto;
            box-sizing: border-box;
            float: left;
        }

        @media (max-width: 780px) {
            .item, .item_3, .item_4, .item_5, .item_2 {
                width: 100%;
            }
			 .item_5, .item_4, .item_3 {
			padding:  30px;
        }
			.item_5::before, .item_4::before,  .item_3::before {
        top: 50%; /* 下に移動 */
        right: 5%; /* 中央に寄せる */
        transform: translateX(50%);
        border-left: 10px solid transparent;
        border-right: 10px solid transparent;
        border-top: 10px solid;
        border-bottom: none; /* 下向きの三角形 */
    }
        }



	.table {
      display: table;
      width: 100%;
      border-collapse: collapse;
	  border-bottom: 0px solid #ddd; /* ボーダーは適宜調整してください */
      margin-bottom: 20px; /* マージンは適宜調整してください */
    }

    .row {
      display: table-row;
    }

	.cell img{
		width: 100%;
	}

	.slide-in {
	  opacity: 0; /* 最初は透明に設定 */
	  transform: translateX(-50px); /* 初期位置を左に移動 */
	  transition: opacity 0.5s ease, transform 0.5s ease; /* アニメーション効果の設定 */
	}

	.slide-in.active {
	  opacity: 1; /* スクロールで表示されたら不透明にする */
	  transform: translateX(0); /* スクロールで元の位置に移動 */
	}

    .cell_title {
      display: table-cell;
      border: 0px solid #ddd; /* ボーダーは適宜調整してください */
      padding: 1px;
	  color: #FFF; /* フォントの色を指定 */
      font-weight: bold; /* フォントの太さを指定 */
	  background-color: #0f2350;
      text-align: center;
    }
	.cell_title2 {
      display: table-cell;
      border: 0px solid #ddd; /* ボーダーは適宜調整してください */
      padding: 1px;
	  color: #0f2350; /* フォントの色を指定 */
      font-weight: bold; /* フォントの太さを指定 */
	  background-color: #FFF;
      text-align: center;
    }

	.cell_main {
      display: table-cell;
      border: 0px solid #ddd; /* ボーダーは適宜調整してください */
      padding: 8px;
	  color: #0f2350; /* フォントの色を指定 */
      text-align: left;
      border-bottom: 3px dotted #a2d7dd; /* ドット線の下線を指定 */
    }

	.cell_sub {
      display: table-cell;
      border: 0px solid #ddd; /* ボーダーは適宜調整してください */
      padding: 8px;
	  color: #0f2350; /* フォントの色を指定 */
      text-align: left;
    }

	.container2 {
      max-width: 1200px;
      margin: 0 auto;
	  padding: 20px;
      display: flex;
      background-color: #fff; /* コンテナの背景色を白に設定 */
      border-radius: 8px; /* 任意でボーダーの角を丸くする */
      overflow: hidden; /* コンテナの中の要素がはみ出さないようにする */
    }

	.store-info {
      flex: 1;
      padding: 20px;
	  font-size: 18px; /* フォントサイズ */
	  text-align: center;
      background-color: #ebf6f7; /* 薄い水色系の背景色 */
      color: #333; /* テキストカラーをダークグレーに変更 */
    }

    .access-map {
      flex: 1;
      padding: 20px;
	  text-align: center;
      background-color: #b3e0f7; /* 薄い水色系の背景色 */
    }

	 .image-area {
      flex: 1;
	  width: 30%;
      padding: 20px;
	  text-align: center;
    }
	 .table-area {
      flex: 1;
      padding: 20px;
	  text-align: center;
    }

    /* レスポンシブ対応 */
    @media (max-width: 780px) {
		.container2 {
        flex-direction: column;
      }

      .table {
        display: block;
		 margin: 0 auto;
		width: 80%;
      }

      .row {
        display: block;
        margin-bottom: 10px; /* マージンは適宜調整してください */
      }

      .cell_title {
        display: block;
        width: 100%;
        box-sizing: border-box;
      }
	  .cell_main {
        display: block;
        width: 100%;
	     padding: 8px;
        box-sizing: border-box;
        border-bottom: 3px dotted #a2d7dd; /* ドット線の下線を指定 */
      }
	  .cell_sub {
        display: block;
        width: 100%;
        padding: 8px;
        box-sizing: border-box;
      }
		.store-info,
      .access-map, .table-area, .image-area {
        flex: none;
        width: 90%;
      }
    }
/********************************************************/
 /* フッターのスタイル */
/********************************************************/

       footer {
            background: linear-gradient(to bottom, #b0c4de, #2980b9); /* 縦にグラデーションを適用 */
            color: #fff;
            padding: 20px 0;
            text-align: center;
            position: relative;
            bottom: 0;
            width: 100%;
        }

        footer nav {
            display: flex;
			 background: none;
            flex-wrap: wrap;
            justify-content: center; /* 中央寄せに変更 */
            gap: 10px; /* リンクの間隔 */
        }

        footer a {
            color: #fff;
            text-decoration: none;
            display: block;
            padding: 5px 10px; /* リンクの余白 */
        }
/********************************************************/
/* サブページトップ画像 */
/********************************************************/
		.sub-container {
            position: relative;
            max-width: 100%;
			padding: 10px 0 0 0;
            overflow: hidden;
        }

        .subimg {
            width: 100%;
            overflow: hidden;
        }

		.subimg img {
            width: 100%;
            height: auto;
        }

		/* レスポンシブデザインの調整 */
        @media screen and (max-width: 780px) {
			.stickyHeader {
				position: fixed;
	        }
			.subimg {
	            margin-top: 70px;
	        }
			
            
        }

/********************************************************/
/* サブページ */
/********************************************************/
		/* 横にラインを引くスタイル */
		.line-wrapper {
		    display: flex;
		    align-items: center;
		}

		.line-wrapper::before,
		.line-wrapper::after {
		    content: '';
		    flex: 1;
		    height: 1px; /* ラインの高さ */
		    background-color: #0066cc; /* ラインの色 */
		}
		/* 横にラインを引くスタイル */
		.line-wrapper02 {
		    display: flex;
		    align-items: center;
		}

		.line-wrapper02::before,
		.line-wrapper02::after {
		    content: '';
		    flex: 1;
		    height: 1px; /* ラインの高さ */
		    background-color: #a52a2a; /* ラインの色 */
		}
		/* 横にラインを引かないスタイル */
		.no-line-wrapper {
		    display: flex;
			align-items: center;
		    text-align: center;
			color: #006600; /* テキストの色 */
		}
		.no-line-wrapper::before,
		.no-line-wrapper::after {
		    content: '';
		    flex: 1;
		    height: 0px; /* ラインの高さ */
		    background-color: #a52a2a; /* ラインの色 */
		}
		
		/* 横にラインを引かないスタイル 左寄せ*/
		.no-line-wrapper-left {
			width: 90%;
			align-items: center;
		    text-align: left;
			color: #006600; /* テキストの色 */
			 padding: 20px 0; /* テキストとラインの間隔 */
			margin: 10px auto; 
		}
		
		/* 横にラインを引かないスタイル 右寄せ*/
		.no-line-wrapper-right {
			width: 90%;
			align-items: center;
		    text-align: right;
			color: #006600; /* テキストの色 */
			 padding: 20px 0; /* テキストとラインの間隔 */
			margin: 10px auto; 
		}
		


		.hr_a52a2a {
		  width: 90%;
		  border-top: 2px solid #a52a2a; /* 赤線 */
		}
		.hr_ffd700 {
		  width: 90%;
		  border-top: 2px solid #ffd700; /* 黄色線 */
		}
		.hr_0066cc {
		  width: 90%;
		  border-top: 2px solid #0066cc; /* 青線 */
		}
		.hr_cccccc {
		  width: 90%;
		  border-top: 1px solid #cccccc; /* 青線 */
		}
		.hr_333333 {
		  width: 90%;
		  border-top: 1px solid #333333; /* 青線 */
		}
		.hr100_333333 {
		  width: 100%;
		  border-top: 1px solid #333333; /* 青線 */
		}

		/* テキストのスタイル */
		.text-content01 {
			font-size: 18px; /* フォントサイズ */
		    font-weight: bold; /* フォントの太さ */
		    color: #0066cc; /* テキストの色（ブルー系） */
		    padding: 20px; /* テキストとラインの間隔 */
		}
		.text-content02 {
			font-size: 36px; /* フォントサイズ */
		    font-weight: bold; /* フォントの太さ */
		    color: #0066cc; /* テキストの色（ブルー系） */
		    padding: 20px; /* テキストとラインの間隔 */
		}
		.text-content02s {
			font-size: 16px; /* フォントサイズ */
		    font-weight: bold; /* フォントの太さ */
		    color: #0066cc; /* テキストの色（ブルー系） */
		    padding: 20px; /* テキストとラインの間隔 */
		}
		.text-content03 {
			font-size: 18px; /* フォントサイズ */
		    font-weight: bold; /* フォントの太さ */
		    color: #a52a2a; /* テキストの色 赤*/
		    padding: 20px; /* テキストとラインの間隔 */
		}
		.text-content03s {
			font-size: 16px; /* フォントサイズ */
		    color: #dc143c; /* テキストの色 赤 */
		    padding: 10px; /* テキストとラインの間隔 */
		}
		.text-content03ss {
			font-size: 14px; /* フォントサイズ */
		    color: #dc143c; /* テキストの色 赤*/
		    padding: 10px; /* テキストとラインの間隔 */
		}
		.text-content04 {
			font-size: 18px; /* フォントサイズ */
		    color: #24140e; /* テキストの色 黒*/
		    padding: 10px; /* テキストとラインの間隔 */
		}
		.text-content04s {
			font-size: 14px; /* フォントサイズ */
		    color: #24140e; /* テキストの色 黒*/
		    padding: 10px; /* テキストとラインの間隔 */
		}
		
		.text-content05 {
			font-size: 20px; /* フォントサイズ */
		    color: #797979; /* テキストの色 ねずみ色*/
		    padding: 10px; /* テキストとラインの間隔 */
		}
		
		

		/* table01のスタイル */
	    .table01 {
		  width: 90%;
		  border: 2px solid #a52a2a; /* テーブルの周りにボーダーを追加 */
	      border-radius: 16px;
	      overflow: hidden; /* ボーダーを適用するためにoverflowを設定 */
	      margin: 20px auto;
	      background-color: #f9f9f9;
			padding: 5px; /* テキストとラインの間隔 */
		
	    }
		/* テーブルのスタイル */
	    .table01 table {
	      width: 100%;
	      border-collapse: collapse;
	      margin-bottom: 20px;
			
	    }
		.table01 th {
		   border-top-left-radius: 10px; /* 左上の角を丸くする */
     	   border-top-right-radius: 10px; /* 右上の角を丸くする */
		   font-size: 16px; /* フォントサイズ */
	       color: #ffffff; /* テキストの色 */
		   text-align: center;
	    }

	    .table01 th, td {
	      border: 0px;
	      padding: 8px;
	      text-align: left;
	    }

	    .table01 th {
	      background-color: #a52a2a;
	    }
		/* セル左のテキスト色を変更 */
	    .cell_left {
		   font-size: 16px; /* フォントサイズ */
	      color: #a52a2a; /* 任意の色を指定 */
	    }

	    /* セル右のテキスト色を変更 */
	    .cell_right {
		   font-size: 14px; /* フォントサイズ */
	      color: #333; /* 任意の色を指定 */
	    }
		/* table02のスタイル */
	    .table02 {
		  width: 50%;
	      overflow: hidden; /* ボーダーを適用するためにoverflowを設定 */
	      margin: 20px auto;
	      background-color: #f9f9f9;
		  padding: 0px; /* テキストとラインの間隔 */
		
	    }
		/* テーブルのスタイル */
	    .table02 table {
	      width: 100%;
	      margin-bottom: 20px;
		  border: 1px solid #333; /* テーブルの周りにボーダーを追加 */
	    }
		.table02_right {
		  width: 100%;
	      overflow: hidden; /* ボーダーを適用するためにoverflowを設定 */
	      margin: 20px auto;
	      background-color: #f9f9f9;
		  padding: 0px; /* テキストとラインの間隔 */
		
	    }
		.table02 th {
		   font-size: 20px; /* フォントサイズ */
	       color: #ffffff; /* テキストの色 */
		   text-align: center;
	    }
		.table02 td {
		   font-size: 18px; /* フォントサイズ */
		   text-align: center;
	    }

	    .table02 th, td {
	      border: 1px solid #333; /* テーブルの周りにボーダーを追加 */
	      padding: 8px;
	      text-align: left;
	    }

	    .table02 th {
	      background-color: #000080;
	    }
		
		/* table02のスタイル */
	    .table03 {
		  width: 80%;
	      overflow: hidden; /* ボーダーを適用するためにoverflowを設定 */
	      margin: 20px auto 0 auto;
	      background-color: #f9f9f9;
		  padding: 0px; /* テキストとラインの間隔 */
		
	    }
		/* テーブルのスタイル */
	    .table03 table {
	      width: 100%;
	      margin-bottom: 0px;
		  border: 1px solid #333; /* テーブルの周りにボーダーを追加 */
	    }
		.table03 th {
		   font-size: 20px; /* フォントサイズ */
	       color: #ffffff; /* テキストの色 */
		   text-align: center;
	    }
		.table03 td {
		   font-size: 18px; /* フォントサイズ */
		   text-align: left;
	    }

	    .table03 th, td {
	      border: 1px solid #333; /* テーブルの周りにボーダーを追加 */
	      padding: 8px;
	      text-align: left;
	    }

	    .table03 th {
	      background-color: #000080;
	    }

		/* レスポンシブスタイル */
	    @media (max-width: 780px) {
	      /* 画面幅が780px以下の場合のスタイル */
	      .table01 {
	        margin: 10px auto; /* マージンを縮小 */
	      }

	     table01 table {
	        font-size: 14px; /* テーブル内のテキストを小さくする */
	      }
		 /* 画面幅が780px以下の場合のスタイル */
	      .table02 {
			width: 90%;
	        margin: 10px auto; /* マージンを縮小 */
	      }

	     table02 table {
	        font-size: 14px; /* テーブル内のテキストを小さくする */
	      }
		/* 画面幅が780px以下の場合のスタイル */
	      .table03 {
			width: 90%;
	        margin: 10px auto; /* マージンを縮小 */
	      }

	     table03 table {
	        font-size: 14px; /* テーブル内のテキストを小さくする */
	      }
	    }

	.center-container {
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0;
    }

    .button-like-text {
      display: inline-block;
      padding: 10px 20px;
      font-size: 16px;
      text-align: center;
      text-decoration: none;
      border: 2px solid #3498db;
      border-radius: 5px;
      color: #3498db;
      background-color: #ffffff;
      cursor: pointer;
      transition: background-color 0.3s, color 0.3s;
    }

    .button-like-text:hover {
      background-color: #3498db;
      color: #ffffff;
    }

/*------------------------------------------------------------

	カレンダーデザイン

------------------------------------------------------------*/
.calendar-container {
  width: 800px;
  margin: 0 auto;
  border-radius: 5px;
  background: #f6f5f4;
  color: #1a1a1a;
}

.calendar-container p {
  height: 80px;
  line-height: 80px;
  text-align: center;
  font-size: 24px;
  margin: 0;
}
.calendar-container h5 {
  text-align: center;
  font-size: 12px;
  margin: 0;
}
.calendar-container h6 {
  text-align: center;
  font-size: 12px;
  background-color: lightblue;
  margin: 0;
}
.calendar {
  padding: 0 30px 30px 30px;
}

.calendar-container table {
  width: 100%;

}
.calendar-container th, td {
  text-align: center;
  padding: 10px;
   border-spacing: 5px;
}
.calendar-container th {
  font-weight: normal;
  font-size: 14px;
}
.calendar-container td {
  font-weight: bold;
  
}
.day *:first-child {
  color: #ff838b;
}
.day *:last-child {
  color: #6fb5ff;
}

#calendar_form .btn {
  display       : inline-block;
  border-radius : 5%;          /* 角丸       */
  font-size     : 11pt;        /* 文字サイズ */
  text-align    : center;      /* 文字位置   */
  cursor        : pointer;     /* カーソル   */
  padding       : 12px 38px;   /* 余白       */
  background    : #00008b;     /* 背景色     */
  color         : #ffffff;     /* 文字色     */
  line-height   : 1em;         /* 1行の高さ  */
  border        : 2px solid #00008b;    /* 枠の指定 */
}
#calendar_form .btn:hover {
  box-shadow    : none;        /* カーソル時の影消去 */
  color         : #00008b;     /* 背景色     */
  background    : #ffffff;     /* 文字色     */
}

@media all and (max-width: 767px) {
 	.calendar-container {
	  width:  100%;
	  margin: 0 auto;
	  border-radius: 5px;
	  background: #f6f5f4;
	  color: #1a1a1a;
	}
	.calendar {
	  padding: 0 5px 5px 5px;
	}
	.calendar-container p {
	 
	  text-align: center;
	  margin: 0;
	}
	
	#calendar_form .btn {
	  display       : inline-block;
	  border-radius : 5%;          /* 角丸       */
	  font-size     : 11pt;        /* 文字サイズ */
	  text-align    : center;      /* 文字位置   */
	  cursor        : pointer;     /* カーソル   */
	  padding       : 12px 5px;   /* 余白       */
	  background    : #000000;     /* 背景色     */
	  color         : #ffffff;     /* 文字色     */
	  line-height   : 1em;         /* 1行の高さ  */
	  border        : 2px solid #000000;    /* 枠の指定 */
	}
	#calendar_form .btn:hover {
	  box-shadow    : none;        /* カーソル時の影消去 */
	  color         : #000000;     /* 背景色     */
	  background    : #ffffff;     /* 文字色     */
	}
}
/*------------------------------------------------------------

	取り消し線

------------------------------------------------------------*/
span.del {
  text-decoration-line: line-through;
 /* text-decoration-style: solid;*/
  text-decoration-style: double;
  text-decoration-color: red;
}
/*------------------------------------------------------------

	追従ボタン

------------------------------------------------------------*/
body .fixed_btn { 
position: fixed;
bottom: 10px;
right: 10px;
padding: 6px 40px;
}
/*------------------------------------------------------------

	文字点滅

------------------------------------------------------------*/
p.blink_paragraph {
  animation: blinkEffect 1s ease infinite;
}
@keyframes blinkEffect {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}