@charset "utf-8";
/* CSS Document */

/*PC:body-------------------------------------*/
@media screen and (min-width:961px){
	.pc {display: block !important;}
	.tb {display: none !important;}
	.sp {display: none !important;}
	
	#hint_top {width: 100%; height: auto; margin: 0 0 30px; padding: 0; background: url("../img/hint_img/hint_back.webp");}
	#hint_topSpace {width: 100%; max-width: 1400px; margin: 0 auto; padding: 80px 0 0; display: flex; justify-content: center; background-color: rgba(255,255,255,0.25);}
	#hint_topSpace ul {width: 60%;}
	#hint_topSpace ul li {padding: 6px 0;}
	
	#hint_h1Spc {width: 100%; max-width: 1400px; margin: 0 auto; padding: 16px 0;}
	#hint_h1Spc  h1 {width: 100%; padding: 8px 0 20px; font-size: 24px; text-align: center; background-color: rgba(255,255,255,0.4); color: #6B401B;}
	
	#hint_topSpace ul li h1 {color: #5A2C00;}
	#hint_topSpace ul li h2 {color: #097B6F;}
	#hint_topSpace ul li span {font-weight: bold; color: #7B4212;}
	#hint_topimg {width: 100%; max-width: 310px;}
	
	#hint_navSpace {width: 98%; max-width: 1200px; margin: 0 auto; padding: 20px 0; border-radius: 8px; background-color: #FFF9EB; border: solid 2px #E1BA97; box-sizing: border-box;}
	.hint_subject {display: flex; flex-direction:row; align-content: center; ustify-content:flex-start; width: 90%; height: 36px; margin: 0 5% 16px; color: #6B401B; overflow: hidden;}
	.hint_subject img {width: 26px; height: 26px; margin: 5px 0; line-height: 0;}
	.hint_subject p {height: 36px; line-height: 36px; font-size: 20px; font-weight: bold;}
	#hint_navSpace nav {width: 98%; margin: 0 auto; padding: 0 0 28px;}
	#hint_navSpace nav ul {display: flex; flex-wrap: wrap; justify-content: flex-start; list-style: none; padding: 0; margin: 0; gap: 16px 1.25%;}
	#hint_navSpace nav ul li {width: 19%; height: auto; min-height: 68px; margin: 0; display: flex;}
	#hint_navSpace nav ul li span {color: #C05F00; font-size: 24px; margin-right: 6px; flex-shrink: 0;}
	#hint_navSpace nav ul li a {width: 100%; height: 68px; padding: 10px 12px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; text-align: center; background-color: #FFFFFF; border: solid 1px #C58953; border-radius: 8px; font-size: 13px; color: #6B401B; text-decoration: none; transition: background-color 0.3s ease, color 0.3s ease; font-weight: bold; line-height: 1.4;}
	#hint_navSpace nav ul li a:hover {background-color: #F9CDA1; color: #6B401B;}
	
	/* 🔥 記事一覧のコンテナをGridに変更 */
	#articleSpc {width: 98%; margin: 0 1%;  padding: 5px 0 20px; 
    	display: grid;
    	/* 💡 自動で均等な「3等分」の列（マス目）を作る命令 */
    	grid-template-columns: repeat(3, 1fr); 
    	/* 💡 カード同士の隙間（上下左右に20px） */
    	gap: 20px; 
	}
	
	/* 💡 子要素の article の指定 */
	#articleSpc article {
    	position: relative; 
    	/* ❌ 横幅を「width: 31.5%;」で固定する必要がなくなります！ */
    	width: 100%;           /* Gridのマス目の横幅いっぱいに自動で広がる */
    	height: 200px; padding: 16px; box-sizing: border-box; border-radius: 8px; border: solid 1px #E1BA97; box-shadow: 0px 0px 18px -9px #777777; background-color: white; display: flex; justify-content: center;
	}
	.article_mark {position: absolute; top: 8px; right: 8px; width: 80px; height: 20px; line-height: 20px; text-align: center; font-size: 12px; background-color: #D0558B; color: white; font-weight: bold; border-radius: 8px;}
	.article_img {width: 120px; height: auto; margin: 20px 0 0;}
	.article_img img {width: 100%; height: auto;}
	#articleSpc article ul {width: 70%; height: 116px; margin: 20px 0 0; padding: 0;}
	.article_title {font-size: 14px; line-height: 18px; font-weight: bold; width: 100%; height: 34px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;}
	.article_day {font-size: 12px; padding: 3px 0;}
	.article_maintext {font-size: 14px; line-height: 18px; width: 100%; height: 54px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;}
	#articleSpc article p {position: absolute; bottom: 3px; width: 100%; height: 26px; line-height: 26px; margin: 6px 0; text-align: center; font-size: 14px; color: #04574E; font-weight: bold;}
	
	/*button*/
	.button-arr a {font-family:'Noto Serif JP',serif;font-size:16px;letter-spacing:.1em;color:#333;font-weight:600;display:block;position:relative;box-sizing:border-box;max-width:180px;text-align:center;padding:4px 16px 4px 0;margin:24px;margin-inline:auto;text-decoration:none;cursor:pointer;transition:all 0.3s;}
	.button-arr a::before {content:"";display:block;position:absolute;width:180px;height:1px;background:#333;bottom:0;transition:all 0.3s;}
	.button-arr a::after {content:"";display:block;position:absolute;width:30px;height:1px;background:#333;rotate:40deg;right:-3px;bottom:10px;transition:all 0.3s;}
	.button-arr a:hover::after,.button-arr a:hover::before {translate: 20px 0;transition: all 0.3s;}
	
	#article_container {width: 98%; max-width: 1200px; height: auto; margin: 0 auto; padding: 20px 0;
		display: flex !important; flex-direction: row; align-items: flex-start; box-sizing: border-box; gap: 24px; /* ★メインとサイドバーの間に程よい隙間を開けます */
	}
	/* .article_containerはdetail.phpのみ */
	.article_container {width: 98%; max-width: 1200px; height: auto; margin: 0 auto; padding: 20px 0; display: flex !important; flex-direction: row; align-items: flex-start; box-sizing: border-box; gap: 24px;}
	.article_content {flex: 1 1 0%; min-width: 0; height: auto; padding: 0; box-sizing: border-box; border: solid 1px #E1BA97; border-radius: 8px;}
	.article_sidebar {width: 300px !important; flex: 0 0 300px !important; height: auto; padding: 0; border: none !important;}
	
	/* 記事一覧の各アイテム（もし archive-item というクラス名にしている場合） */
	.archive-item {display: flex; background: #ffffff; border: 1px solid #E1BA97; border-radius: 8px;
    	padding: 16px;       /* ★内側に16pxの余白を作って、文字を枠から離します */
    	margin-bottom: 20px; /* 記事同士の縦の隙間 */
	}
		
	/* 記事本文の行間を少し広げて読みやすくする */
	.archive-item p {
    	line-height: 1.6;    /* ★行間を少し広げると、詰まった感が消えて優しく見えます */
    	color: #6B401B;
	}
		
	/* サイドバー内の各ブロックの共通設定 */
	.sidebar-block {background-color: #FFFFFF; border: solid 1px #E1BA97; border-radius: 8px; padding: 20px; margin-bottom: 24px; /* ブロック同士の縦の隙間 */
		box-shadow: 0px 2px 8px -4px #777777;
	}
	/* 見出しアイコン調整 */
	.sidebar-block h3 {display: flex;}
	.sidebar-block h3 img {width: 24px; height: 24px; margin: 0;}
	.sidebar-block h3 p {height: 24px; font-size: 16px; color: #5A2C00;}
	
	/* ブロック内の見出し */
	.sidebar-block h3 {margin: 0 0 12px 0; padding-bottom: 8px;
    	border-bottom: dashed 1px #E1BA97; /* 見出しの下に可愛い点線 */
	}
	
	/* テキストの調整 */
	.sidebar-block p {font-size: 14px; line-height: 1.6; color: #6B401B; margin: 0;}
	
	/* 検索ボックスのエリア */
	.search-box {display: flex; gap: 6px; /* 入力欄とボタンの間の隙間 */}
	.search-box input {flex-grow: 1; padding: 8px 12px; border: 1px solid #C58953; border-radius: 4px; font-size: 14px;}
	.search-box button {background-color: #04574E; /* ジョイまつど様のメインカラー系深緑 */
		color: white; border: none; padding: 0 16px; border-radius: 4px; cursor: pointer; font-size: 14px;
	}
	
	/* 人気ランキングのリスト */
	.ranking-list {margin: 0; padding-left: 20px; color: #6B401B;}
	.ranking-list li {margin-bottom: 10px; font-size: 14px;}
	.ranking-list li a {color: #04574E; text-decoration: none;}
	.ranking-list li a:hover {text-decoration: underline;}
	
}

/*TB:body-------------------------------------*/
@media screen and (min-width: 768px) and (max-width: 960px){
	.pc {display: none !important;}
	.tb {display: block !important;}
	.sp {display: none !important;}
	
	#hint_top {width: 100%; height: auto; margin: 0 0 30px; padding: 0; background: url("../img/hint_img/hint_back.webp");}
	#hint_topSpace {width: 100%; max-width: 1400px; height: auto; margin: 0 auto 20px; padding: 80px 0 0; display: flex; flex-flow: column; justify-content: center; background-color: rgba(255,255,255,0.25);}
	#hint_topSpace ul {width: 100%; margin: 0; padding: 0;}
	#hint_topSpace ul li {padding: 6px 0; text-align: center;}
	
	#hint_h1Spc {width: 100%; max-width: 1400px; margin: 0 auto; padding: 16px 0;}
	#hint_h1Spc  h1 {width: 100%; padding: 8px 0 20px; font-size: 24px; text-align: center; background-color: rgba(255,255,255,0.4); color: #6B401B;}
	
	#hint_topSpace ul li h1 {color: #5A2C00;}
	#hint_topSpace ul li h2 {color: #097B6F;}
	#hint_topSpace ul li span {font-weight: bold; color: #7B4212;}
	#hint_topimg {width: 100%; max-width: 310px; margin: 0 auto;}
	
	#hint_navSpace {width: 98%; max-width: 1200px; margin: 0 auto; padding: 20px 15px; border-radius: 8px; background-color: #FFF9EB; border: solid 2px #E1BA97; box-sizing: border-box;}
	.hint_subject {display: flex; flex-direction:row; align-content: center; ustify-content:flex-start; width: 90%; height: 36px; margin: 0 5% 16px; color: #6B401B; overflow: hidden;}
	.hint_subject img {width: 26px; height: 26px; margin: 5px 0; line-height: 0;}
	.hint_subject p {height: 36px; line-height: 36px; font-size: 20px; font-weight: bold;}
	#hint_navSpace nav {width: 98%; margin: 0 auto; padding: 0 0 28px;}
	#hint_navSpace nav ul {display: flex; flex-wrap: wrap; justify-content: flex-start; list-style: none; padding: 0; margin: 0; gap: 16px 1.25%;}
	#hint_navSpace nav ul li {width: 19%; height: auto; min-height: 68px; margin: 0; display: flex;}
	#hint_navSpace nav ul li span {color: #C05F00; font-size: 24px; margin-right: 6px; flex-shrink: 0;}
	#hint_navSpace nav ul li a {width: 100%; height: 68px; padding: 10px 12px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; text-align: center; background-color: #FFFFFF; border: solid 1px #C58953; border-radius: 8px; font-size: 13px; color: #6B401B; text-decoration: none; transition: background-color 0.3s ease, color 0.3s ease; font-weight: bold; line-height: 1.4;}
	#hint_navSpace nav ul li a:hover {background-color: #F9CDA1; color: #6B401B;}
	
	/* 🔥 記事一覧のコンテナをGridに変更 */
	#articleSpc {width: 98%; margin: 0 1%;  padding: 5px 0 20px; 
    	display: grid;
    	/* 💡 自動で均等な「3等分」の列（マス目）を作る命令 */
    	grid-template-columns: repeat(2, 1fr); 
    	/* 💡 カード同士の隙間（上下左右に20px） */
    	gap: 20px; 
	}
	
	/* 💡 子要素の article の指定 */
	#articleSpc article {
    	position: relative; 
    	/* ❌ 横幅を「width: 31.5%;」で固定する必要がなくなります！ */
    	width: 100%;           /* Gridのマス目の横幅いっぱいに自動で広がる */
    	height: 200px; padding: 16px; box-sizing: border-box; border-radius: 8px; border: solid 1px #E1BA97; box-shadow: 0px 0px 18px -9px #777777; background-color: white; display: flex; justify-content: center;
	}
	.article_mark {position: absolute; top: 8px; right: 8px; width: 80px; height: 20px; line-height: 20px; text-align: center; font-size: 12px; background-color: #D0558B; color: white; font-weight: bold; border-radius: 8px;}
	.article_img {width: 120px; height: auto; margin: 20px 0 0;}
	.article_img img {width: 100%; height: auto;}
	#articleSpc article ul {width: 70%; height: 116px; margin: 20px 0 0; padding: 0;}
	.article_title {font-size: 14px; line-height: 18px; font-weight: bold; width: 100%; height: 34px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;}
	.article_day {font-size: 12px; padding: 3px 0;}
	.article_maintext {font-size: 14px; line-height: 18px; width: 100%; height: 54px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;}
	#articleSpc article p {position: absolute; bottom: 3px; width: 100%; height: 26px; line-height: 26px; margin: 6px 0; text-align: center; font-size: 14px; color: #04574E; font-weight: bold;}
	
	/*button*/
	.button-arr a {font-family:'Noto Serif JP',serif;font-size:16px;letter-spacing:.1em;color:#333;font-weight:600;display:block;position:relative;box-sizing:border-box;max-width:180px;text-align:center;padding:4px 16px 4px 0;margin:24px;margin-inline:auto;text-decoration:none;cursor:pointer;transition:all 0.3s;}
	.button-arr a::before {content:"";display:block;position:absolute;width:180px;height:1px;background:#333;bottom:0;transition:all 0.3s;}
	.button-arr a::after {content:"";display:block;position:absolute;width:30px;height:1px;background:#333;rotate:40deg;right:-3px;bottom:10px;transition:all 0.3s;}
	.button-arr a:hover::after,.button-arr a:hover::before {translate: 20px 0;transition: all 0.3s;}
	
	#article_container {width: 100%; max-width: 1200px; height: auto; margin: 0 auto; padding: 20px 15px;
		display: flex !important; flex-direction: column !important; align-items: flex-start; box-sizing: border-box; gap: 32px; /* ★メインとサイドバーの間に程よい隙間を開けます */
	}
	/* .article_containerはdetail.phpのみ */
	.article_container {width: 98%; max-width: 1200px; height: auto; margin: 0 auto; padding: 20px 15px;
		display: flex !important; flex-direction: column !important; align-items: flex-start; box-sizing: border-box; gap: 32px; /* ★メインとサイドバーの間に程よい隙間を開けます */
	}
	.article_content {flex: 1 1 100%; width: 100% !important; height: auto; padding: 0; box-sizing: border-box; border: solid 1px #E1BA97; border-radius: 8px;}
	.article_sidebar {width: 100% !important; flex: 0 0 100% !important; height: auto; padding: 0; border: none !important;}
	
	/* 記事一覧の各アイテム（もし archive-item というクラス名にしている場合） */
	.archive-item {display: flex; background: #ffffff; border: 1px solid #E1BA97; border-radius: 8px;
    	padding: 16px;       /* ★内側に16pxの余白を作って、文字を枠から離します */
    	margin-bottom: 20px; /* 記事同士の縦の隙間 */
	}
		
	/* 記事本文の行間を少し広げて読みやすくする */
	.archive-item p {
    	line-height: 1.6;    /* ★行間を少し広げると、詰まった感が消えて優しく見えます */
    	color: #6B401B;
	}
		
	/* サイドバー内の各ブロックの共通設定 */
	.sidebar-block {background-color: #FFFFFF; border: solid 1px #E1BA97; border-radius: 8px; padding: 20px; margin-bottom: 24px; /* ブロック同士の縦の隙間 */
		box-shadow: 0px 2px 8px -4px #777777;
	}
	/* 見出しアイコン調整 */
	.sidebar-block h3 {display: flex;}
	.sidebar-block h3 img {width: 24px; height: 24px; margin: 0;}
	.sidebar-block h3 p {height: 24px; font-size: 16px; color: #5A2C00;}
	
	/* ブロック内の見出し */
	.sidebar-block h3 {margin: 0 0 12px 0; padding-bottom: 8px;
    	border-bottom: dashed 1px #E1BA97; /* 見出しの下に可愛い点線 */
	}
	
	/* テキストの調整 */
	.sidebar-block p {font-size: 14px; line-height: 1.6; color: #6B401B; margin: 0;}
	
	/* 検索ボックスのエリア */
	.search-box {display: flex; gap: 6px; /* 入力欄とボタンの間の隙間 */}
	.search-box input {flex-grow: 1; padding: 8px 12px; border: 1px solid #C58953; border-radius: 4px; font-size: 14px;}
	.search-box button {background-color: #04574E; /* ジョイまつど様のメインカラー系深緑 */
		color: white; border: none; padding: 0 16px; border-radius: 4px; cursor: pointer; font-size: 14px;
	}
	
	/* 人気ランキングのリスト */
	.ranking-list {margin: 0; padding-left: 20px; color: #6B401B;}
	.ranking-list li {margin-bottom: 10px; font-size: 14px;}
	.ranking-list li a {color: #04574E; text-decoration: none;}
	.ranking-list li a:hover {text-decoration: underline;}
	
}

/*SP:body-------------------------------------*/
@media screen and (max-width: 767px){
	.pc {display: none !important;}
	.tb {display: none !important;}
	.sp {display: block !important;}
	
	#hint_top {width: 100%; height: auto; margin: 0 0 30px; padding: 0; background: url("../img/hint_img/hint_back.webp");}
	#hint_topSpace {width: 98%; max-width: 1400px; height: auto; margin: 0 auto 20px; padding: 16px 0 0; display: flex; flex-flow: column; justify-content: center; background-color: rgba(255,255,255,0.25);}
	#hint_topSpace ul {width: 100%; margin: 0; padding: 0;}
	#hint_topSpace ul li {width: 100%; padding: 6px 0;}
	
	#hint_h1Spc {width: 100%; max-width: 1400px; margin: 0 auto; padding: 16px 0;}
	#hint_h1Spc  h1 {width: 100%; padding: 8px 0 20px; font-size: 24px; text-align: center; background-color: rgba(255,255,255,0.4); color: #6B401B;}
	
	#hint_topSpace ul li h1 {color: #5A2C00; font-size: 20px; text-align: center;}
	#hint_topSpace ul li h2 {color: #097B6F; font-size: 16px; text-align: center;}
	#hint_topSpace ul li span {
		display: block; /* ★ここを追加：spanをブロック要素にして横幅いっぱいに広げる */
		font-weight: bold; color: #7B4212; font-size: 14px; padding: 0 26px; box-sizing: border-box; text-align: center !important;
	}
	#hint_topimg {width: 100%; max-width: 310px; margin: 0 auto;}
	
	#hint_navSpace {width: 98%; max-width: 1200px; margin: 0 auto; padding: 20px 15px; border-radius: 8px; background-color: #FFF9EB; border: solid 2px #E1BA97; box-sizing: border-box;}
	.hint_subject {display: flex; flex-direction:row; align-content: center; ustify-content:flex-start; width: 90%; height: 36px; margin: 0 5% 16px; color: #6B401B; overflow: hidden;}
	.hint_subject img {width: 26px; height: 26px; margin: 5px 0; line-height: 0;}
	.hint_subject p {height: 36px; line-height: 36px; font-size: 18px; font-weight: bold;}
	#hint_navSpace nav {width: 98%; margin: 0 auto; padding: 0 0 28px;}
	#hint_navSpace nav ul {display: flex; flex-wrap: wrap; justify-content: flex-start; list-style: none; padding: 0; margin: 0; gap: 16px 1.25%;}
	#hint_navSpace nav ul li {width: 19%; height: auto; min-height: 68px; margin: 0; display: flex;}
	#hint_navSpace nav ul li span {color: #C05F00; font-size: 24px; margin-right: 6px; flex-shrink: 0;}
	#hint_navSpace nav ul li a {width: 100%; height: 68px; padding: 10px 12px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; text-align: center; background-color: #FFFFFF; border: solid 1px #C58953; border-radius: 8px; font-size: 13px; color: #6B401B; text-decoration: none; transition: background-color 0.3s ease, color 0.3s ease; font-weight: bold; line-height: 1.4;}
	#hint_navSpace nav ul li a:hover {background-color: #F9CDA1; color: #6B401B;}
	
	/* 🔥 記事一覧のコンテナをGridに変更 */
	#articleSpc {width: 98%; margin: 0 1%;  padding: 5px 0 20px; 
    	display: grid;
    	/* 💡 自動で均等な「3等分」の列（マス目）を作る命令 */
    	grid-template-columns: repeat(1, 1fr); 
    	/* 💡 カード同士の隙間（上下左右に20px） */
    	gap: 20px; 
	}
	
	/* 💡 子要素の article の指定 */
	#articleSpc article {
    	position: relative; 
    	/* ❌ 横幅を「width: 31.5%;」で固定する必要がなくなります！ */
    	width: 100%;           /* Gridのマス目の横幅いっぱいに自動で広がる */
    	height: 200px; padding: 16px; box-sizing: border-box; border-radius: 8px; border: solid 1px #E1BA97; box-shadow: 0px 0px 18px -9px #777777; background-color: white; display: flex; justify-content: center;
	}
	.article_mark {position: absolute; top: 8px; right: 8px; width: 80px; height: 20px; line-height: 20px; text-align: center; font-size: 12px; background-color: #D0558B; color: white; font-weight: bold; border-radius: 8px;}
	.article_img {width: 120px; height: auto; margin: 20px 0 0;}
	.article_img img {width: 100%; height: auto;}
	#articleSpc article ul {width: 70%; height: 116px; margin: 20px 0 0; padding: 0;}
	.article_title {font-size: 14px; line-height: 18px; font-weight: bold; width: 100%; height: 34px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;}
	.article_day {font-size: 12px; padding: 3px 0;}
	.article_maintext {font-size: 14px; line-height: 18px; width: 100%; height: 54px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;}
	#articleSpc article p {position: absolute; bottom: 3px; width: 100%; height: 26px; line-height: 26px; margin: 6px 0; text-align: center; font-size: 14px; color: #04574E; font-weight: bold;}
	
	/*button*/
	.button-arr a {font-family:'Noto Serif JP',serif;font-size:16px;letter-spacing:.1em;color:#333;font-weight:600;display:block;position:relative;box-sizing:border-box;max-width:180px;text-align:center;padding:4px 16px 4px 0;margin:24px;margin-inline:auto;text-decoration:none;cursor:pointer;transition:all 0.3s;}
	.button-arr a::before {content:"";display:block;position:absolute;width:180px;height:1px;background:#333;bottom:0;transition:all 0.3s;}
	.button-arr a::after {content:"";display:block;position:absolute;width:30px;height:1px;background:#333;rotate:40deg;right:-3px;bottom:10px;transition:all 0.3s;}
	.button-arr a:hover::after,.button-arr a:hover::before {translate: 20px 0;transition: all 0.3s;}
	
	#article_container {width: 100%; max-width: 1200px; height: auto; margin: 0 auto; padding: 20px 15px;
		display: flex !important; flex-direction: column !important; align-items: flex-start; box-sizing: border-box; gap: 32px; /* ★メインとサイドバーの間に程よい隙間を開けます */
	}
	/* .article_containerはdetail.phpのみ */
	.article_container {width: 100%; max-width: 1200px; height: auto; margin: 0 auto; padding: 20px 15px;
		display: flex !important; flex-direction: column !important; align-items: flex-start; box-sizing: border-box; gap: 32px; /* ★メインとサイドバーの間に程よい隙間を開けます */
	}
	.article_content {flex: 1 1 100%; width: 100% !important; height: auto; padding: 0; box-sizing: border-box; border: solid 1px #E1BA97; border-radius: 8px;}
	.article_sidebar {width: 100% !important; flex: 0 0 100% !important; height: auto; padding: 0; border: none !important;}
	
	/* 記事一覧の各アイテム（もし archive-item というクラス名にしている場合） */
	.archive-item {display: flex; background: #ffffff; border: 1px solid #E1BA97; border-radius: 8px;
    	padding: 16px;       /* ★内側に16pxの余白を作って、文字を枠から離します */
    	margin-bottom: 20px; /* 記事同士の縦の隙間 */
	}
		
	/* 記事本文の行間を少し広げて読みやすくする */
	.archive-item p {
    	line-height: 1.6;    /* ★行間を少し広げると、詰まった感が消えて優しく見えます */
    	color: #6B401B;
	}
		
	/* サイドバー内の各ブロックの共通設定 */
	.sidebar-block {background-color: #FFFFFF; border: solid 1px #E1BA97; border-radius: 8px; padding: 20px; margin-bottom: 24px; /* ブロック同士の縦の隙間 */
		box-shadow: 0px 2px 8px -4px #777777;
	}
	/* 見出しアイコン調整 */
	.sidebar-block h3 {display: flex;}
	.sidebar-block h3 img {width: 24px; height: 24px; margin: 0;}
	.sidebar-block h3 p {height: 24px; font-size: 16px; color: #5A2C00;}
	
	/* ブロック内の見出し */
	.sidebar-block h3 {margin: 0 0 12px 0; padding-bottom: 8px;
    	border-bottom: dashed 1px #E1BA97; /* 見出しの下に可愛い点線 */
	}
	
	/* テキストの調整 */
	.sidebar-block p {font-size: 14px; line-height: 1.6; color: #6B401B; margin: 0;}
	
	/* 検索ボックスのエリア */
	.search-box {display: flex; gap: 6px; /* 入力欄とボタンの間の隙間 */}
	.search-box input {flex-grow: 1; padding: 8px 12px; border: 1px solid #C58953; border-radius: 4px; font-size: 14px;}
	.search-box button {background-color: #04574E; /* ジョイまつど様のメインカラー系深緑 */
		color: white; border: none; padding: 0 16px; border-radius: 4px; cursor: pointer; font-size: 14px;
	}
	
	/* 人気ランキングのリスト */
	.ranking-list {margin: 0; padding-left: 20px; color: #6B401B;}
	.ranking-list li {margin-bottom: 10px; font-size: 14px;}
	.ranking-list li a {color: #04574E; text-decoration: none;}
	.ranking-list li a:hover {text-decoration: underline;}
	
}