@import url('https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@500&display=swap');
			
			@font-face {
				font-family: "kitchenkatakana";
				src: url(../font/キッチンカタカナ.ttf) format("truetype");
			}

			@font-face {
				font-family: "TsunagiGothic";
				src: url(../font/TsunagiGothic.ttf) format("truetype");
			}

			:root {
				--scrollbar: 0;
				--sponge: #FFFAE7;
				--moji: #493C36;
				--aporo: #1d4403;
				--logofont: 'kitchenkatakana';
				--subfont: 'TsunagiGothic';
				--mainfont: 'Zen Kaku Gothic New', sans-serif;
			}

			/* idで指定した場所にジャンプした際、上から３割分下に表示（上すぎると見にくいので） */
			html{
				scroll-padding-top: 30vh;
				overflow-y: scroll;
				/*user-select: none;*/
			}
				

            body {
				font-family: var(--mainfont);
                line-height: 1.7;
                letter-spacing: 0.05em;
                font-size: 100%;
				background-color: var(--sponge);
				margin: 0;
				width: calc(100vw - var(--scrollbar));
				display: flex;
				flex-direction:column;
				min-height: 100vh;
			}

			strong {
				background: linear-gradient(transparent 60%, #ffff66 40%);
			}

			article {
				font-family: var(--mainfont);
				font-size: 0.85rem;
			}
			article a {
				text-decoration: underline;
			}

			a {
				text-decoration: none;
			}

			ul, ol, li {
				list-style-type: none;
			}
			
			h1, h2 {
				font-weight: normal;
			}
			
			h1 a, h1 a:hover, h1 a:visited, h2 a, h2 a:hover, h2 a:visited{
				color: white;
			}

			.wrap {
				flex: 1;
				display: grid;
				grid-template-columns:  minmax(170px, 1fr) 10fr;  		 
			}
			
			.main {
				margin: 35px 100px 30px 0;
				flex-grow: 1;	
				color: var(--moji);
			}
			.main_title {
				border-bottom: double var(--moji);
				margin-bottom: 20px;
			}
			.main_title h2 {
				color: var(--moji);
				font-family: var(--logofont);
				font-size: 1.15rem;
			}
			.main_title h2 span, .main_content h3 span{
				margin-left: 15px;
				font-size: 0.75em;
			}
			.main_title h3 {
				font-family: var(--subfont);
				margin-bottom: 5px;
				font-size: 1.15rem;
			}

			.home_title {
				margin-bottom: 20px;
			}
			.home_title h1 {
				color: var(--aporo);
				font-family: var(--logofont);
				font-size: 1.95rem;
			}
			.home_title h1 span{
				font-family: var(--mainfont);
				margin-left: 15px;
				font-size: 0.6rem;
			}

			.breadcrumb {
				font-family: var(--subfont);
				display: flex;
				gap: 0 10px;
				list-style: none;
				padding: 0;
				font-size: 0.7rem;
			}
			.breadcrumb li {
				display: flex;
				align-items: center;
			}			
			.breadcrumb li:not(:last-child)::after {
				display: inline-block;
				margin-left: 10px;
				color: var(--moji);
				content: '/';
			}			
			.breadcrumb a {
				color: var(--moji);
			}

			.text-link a {
				position: absolute;
				top: 0;
				left: 0;
				height:100%;
				width: 100%;
			}

			.home_content {
				position: relative;
				padding: 10px 20px 30px 20px;
				margin-bottom: 20px;
			}

			.main_content {
				position: relative;
				padding: 10px 20px 30px 20px;
				margin-bottom: 20px;
                border-bottom: solid 1px var(--moji);
			}
			.home_content h3, .main_content h3 {
				font-family: var(--subfont);
				margin-bottom: 5px;
				font-size: 0.95rem;
			}


			.main_title .time1, .main_title .time2 {
				font-family: var(--subfont);
				margin-left: 15px;
				font-size: 0.6em;
			}
			.main_content .time1, .main_content .time2 {
				font-family: var(--subfont);
				margin-left: 15px;
				font-size: 0.75em;
			}
			span.time1::before {
				content: "投稿日：";
				display: inline-block;
				width: 50px;
				height: 25px;
				background-size: contain;
			}
			span.time2::before {
				content: "更新日：";
				display: inline-block;
				width: 50px;
				height: 25px;
				background-size: contain;
			}	

			.limit-text {
				overflow: hidden;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 3; 	  
			}

			.text p{
				padding: 0.2rem 0 0.8rem 0;
			}

			.side_menu {
				background: var(--aporo);
				color: white;
				flex-shrink: 0;	
				padding: 15px;
				margin: 0px 50px;
				position: sticky;
				top: 0;
			}
            .side_menu h2 {
				font-family: var(--logofont);
                text-align: center;
				font-size: 1.25rem;
            }

            .menu-bar {
				font-family: var(--subfont);
				background: var(--aporo);
				text-align: center;
                padding: 0;
            }
			.menu-bar a {
				color: white;
			}


			dl.info{
				display: flex;
				flex-wrap: wrap;
				align-items: stretch;	
				width: 100%;
			}
			dl.info dt{
				color: var(--moji);
				padding: 2px;
				width: 100px;
			}
			dl.info dt::before {
				content: "・";
				display: inline-block;
				width: 20px;
				background-size: contain;
			}	
			dl.info dd{
				padding: 2px;
				width: calc(100% - 100px);
			}
			dl.info dd::before {
				content: "：";
				display: inline-block;
				width: 20px;
				background-size: contain;
			}	

			footer{
				margin-top: 30px;
				padding: 10px 0;
				font-size: 0.7rem;
				text-align: center;
				background: var(--moji);
				color: white;
			}

			/* これはスライドしなくていいときに使うやつ（今は使ってない） */
			/*.object-fit {
				margin-bottom: 10vh;
				width: 100%;
				height: 70vh;
				object-fit: cover;
				font-family: 'object-fit: cover';
			}*/

			/* 画像スライドショー */
			.slideshow {
				position: relative;
				overflow: hidden;
			}
			/* :::::: slideContents :::::: */
			.slideContents {
				position: relative;
				background: white;
				text-align: center;
				-webkit-user-select: none;
				user-select: none;
			}
			.slideContents section {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
			}
			.slideContents section img {
				margin-bottom: 10vh;
				width: 100%;
				height: 70vh;
				object-fit: cover;
				font-family: 'object-fit: cover';
				box-sizing: border-box;
				vertical-align: middle;
			}
			@media (min-width: 520px) {
				.slideContents section img {
					aspect-ratio: 3 / 1;
					object-fit: cover;
					font-family: 'object-fit: cover';
				}
			}
			/* :::::: mechanism :::::: */
			.slideContents #slide1 {
				position: relative;
			}
			.slideContents section {
				animation: autoplay 30s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
			}
			@keyframes autoplay {
				from, to, 16% { transform: none; }
				20% { transform: translateX(-100%); }
				20.001%, 96% { transform: translateX(100%); }
			}
			.slideContents #slide1 { animation-delay: 0s; }
			.slideContents #slide2 { animation-delay: -24s; }
			.slideContents #slide3 { animation-delay: -18s; }
			.slideContents #slide4 { animation-delay: -12s; }
			.slideContents #slide5 { animation-delay: -6s; }



			/*-- 更新履歴スクロールボックス --*/
			.scrollbox {
				overflow-y: auto;
				max-block-size: 14rem;
				background-color: var(--sponge);
				border-radius: 3px;
				border: 1px solid var(--moji);
			}
			.scrollbox::-webkit-scrollbar {
				width: 10px;
				height: 10px;
			}
			.scrollbox::-webkit-scrollbar-thumb {
				background: var(--moji);
				border-radius: 5px;
			}
			.news {
				font-size: 0.85rem;
				overflow: auto;
				width: 100%;
				height: 20vh;
				padding: 5px 20px;
				border: 1px solid var(--moji);
				background-color: var(--sponge);
			}
			.news p {
				padding: 0.25rem 0;
			}		  
			.ahide {
				display: none;
			}

			/*ここにスマホ対応のCSS*/
			@media screen and (max-width: 767px) {
				/* この下は変えないで */
				.wrap {
					grid-template-columns: 1fr;
				}
				.main {
					padding: 0;
					margin: auto 30px;
				}
				.side {
					position: sticky;
					top: 0;
					z-index: 999;
				}
				.side_menu h2 {
					font-size: 1rem;
				}
				.side_menu {
					margin: 0 0 25px 0;
					padding: 10px 0 5px; 
				}
				.menu-bar {
					margin: 0 0 5px;
				}
                .menu-bar li {
					display: inline-block;
					margin: 0 5px;	
					font-size: 1em;		
                }
				.hide {
					display: none;
				}
				.main_content {
					padding: 0px 10px 20px 10px;
					margin-bottom: 20px;
				}
				/*これより上はあんまり変えたくない*/


				.slideContents section img {
					margin-bottom: 5vh; 
					height: 45vh;
				}
				.news {
					font-size: 0.75rem;
					overflow: auto;
					width: 100%;
					height: 15vh;
					padding: 5px 20px;
					border: 1px solid var(--moji);
					background-color: var(--sponge);
				}

				.home_title h1 {
					font-size: 1.75rem;
				}

				.main_title h2 {
					font-size: 1rem;
				}
				
				/* pcならそのままで良いけど、スマホの場合だと横幅小さいから、
				spanの幅とか位置を変えた方がいいかもしれない
				(トーチのブログページならタイトルの左上に小さめでついてた) */

				.main_title h2 span, .main_content h3 span{
					margin-left: 5px;
					font-size: 0.2rem;
				}
				.home_content h3, .main_content h3 {
					font-family: var(--subfont);
					margin-bottom: 5px;
					font-size: 0.75rem;
				}
				span.time1::before, span.time2::before {
					width: 40px;
				}
				

				article {
					font-family: var(--mainfont);
					font-size: 0.65rem;
				}
				footer{
					font-size: 0.5rem;
				}

			}
			/* タブレット用のCSS */
			@media only screen and (min-width:479px) and (max-width:820px) {
				.slideContents section img {
					margin-bottom: 5vh; 
					height: 35vh;
				}
				.news {
					height: 10vh;
				}
			}