h2.news{
	margin-bottom: 2rem;
	text-align: center;
	margin-top: 2rem;
	margin-bottom: 2rem;
	color: #333;
	font-size: 3rem;
}
.topicPath_header{
	width: 1000px;
	margin-left: auto;
	margin-right: auto;
	padding-top: 20px;
}
@media (max-width: 480px) {
	h2.news{
		font-size: 2.3rem;
		margin-top: 90px;
	}
    .topicPath_header {
        display: none;
    }
}

.container_news{
	width: 1000px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 2rem;
	border-radius: 1.0rem;
	padding: 2rem 10rem 4rem 10rem;
	background-color: white;
	box-shadow: 0px 0px 5px #e2e2e2;
	scroll-margin-top: 250px;
}
@media (max-width: 480px) {
  .container_news {
    width: calc(100% - 1rem); /* パディングの左右の合計を差し引く */
    margin: 0 auto 0.5rem auto; /* 左右のマージンを自動に設定 */
    padding: 1.8rem; /* すべての側に均等にパディングを設定 */
    padding-top: 1rem;
    padding-bottom: 3rem;
    margin-bottom: 2rem;
  }
}
.container_inner {
	display: flex;
	width: 100%;
}
.container_inner .icon {
	padding-right: 20px;
}
.container_inner .text {
    flex-grow: 1;
    padding-left: 0px;/* 余白を調整するためにパディングを追加 */
    padding-top:10px;
    color: #333;
}
.container_inner .text .date{
	font-size: 1.3rem;
	padding-left: 10px;
}
@media (max-width: 480px) {
	.container_inner .icon {
		display: none;
	}
	.container_inner .text{
		padding-left: 0.7rem;
	}
}
.container_inner .text .article{
	padding: 20px 0px 0px 0px;
	font-size: 1.4rem;
}
.container_inner .text .article a{
	color: var(--maincolor-link);
}
.container_inner .text .article a:hover{
	text-decoration: underline;
}
.container_inner .text .title{
	background-color: ;
	padding: 20px 0px 10px 0px;
	border-radius: 0rem;
	font-size: 2.5rem;
	font-weight: 900;
	border-bottom: 1px solid #333;
	color: #333;
}     
@media (max-width: 480px) {
	.container_inner .text .title{
		padding-top: 1rem;
		padding-bottom: 1rem;
		font-size: 2rem;
	}
}

/* カテゴリ */
.container_inner .text .category-info{
	font-size: 1.3rem;
	background-color: white;
	padding: 3px 15px;
	border: 1px solid #1cb4d3;
	border-radius: 5rem;
	color: #1cb4d3;
}
.container_inner .text .category-book{
	font-size: 1.3rem;
	background-color: white;
	padding: 3px 15px;
	border: 1px solid #fa8c78;
	border-radius: 5rem;
	color: #fa8c78;
}
.container_inner .text .category-goods{
	font-size: 1.3rem;
	background-color: white;
	padding: 3px 15px;
	border: 1px solid #5fd777;
	border-radius: 5rem;
	color: #5fd777;
}

/* アイコン */
.container_inner .icon-info {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    position: relative;
    background-color: #1cb4d3;
    width: 80px;
    height: 80px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.container_inner .icon-info:before {
    content: "\f129"; 
    font-family: "Font Awesome 5 Free"; 
    font-weight: 900;
    color: #ffffff;
    position: absolute;
    font-size: 45px;
}
@media (max-width: 480px) {
	.container_inner .icon-info{
		display: none;
	}
	.container_inner .icon-info-sp{
		width: 30px;
		height: 30px;
		display: inline-flex;
		justify-content: center;
		align-items: center;
		border-radius: 50%;
		position: relative;
		background-color: #1cb4d3;
		margin-bottom: -10px;
	}
	.container_inner .icon-info-sp:before{
		font-size: 13px;
		content: "\f129"; 
		font-family: "Font Awesome 5 Free"; 
		font-weight: 900;
		color: #ffffff;
		position: absolute;
	}
}
.container_inner .icon-book {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    position: relative;
    background-color: #fa8c78;
}
.container_inner .icon-book:before {
    content: "\f518"; /* Font AwesomeのユーザーアイコンのUnicode */
    font-family: "Font Awesome 5 Free"; /* Font Awesomeのフォントファミリ */
    font-weight: 900; /* フォントのウェイトを設定 */
    font-size: 40px;
    color: #ffffff;
    position: absolute;
}
@media (max-width: 480px) {
	.container_inner .icon-book-sp{
		width: 30px;
		height: 30px;
		display: inline-flex;
		justify-content: center;
		align-items: center;
		border-radius: 50%;
		position: relative;
		background-color: #fa8c78;
		margin-bottom: -10px;
	}
	.container_inner .icon-book-sp:before{
		font-size: 13px;
		content: "\f518"; 
		font-family: "Font Awesome 5 Free"; 
		font-weight: 900;
		color: #ffffff;
		position: absolute;
	}
}
.container_inner .icon-goods {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    position: relative;
    background-color: #5fd777;
}
.container_inner .icon-goods:before {
    content: "\f005"; /* Font AwesomeのユーザーアイコンのUnicode */
    font-family: "Font Awesome 5 Free"; /* Font Awesomeのフォントファミリ */
    font-weight: 900; /* フォントのウェイトを設定 */
    font-size: 40px;
    color: #ffffff;
    position: absolute;
}
@media (max-width: 480px) {
	.container_inner .icon-goods-sp{
		width: 30px;
		height: 30px;
		display: inline-flex;
		justify-content: center;
		align-items: center;
		border-radius: 50%;
		position: relative;
		background-color: #5fd777;
		margin-bottom: -10px;
	}
	.container_inner .icon-goods-sp:before{
		font-size: 13px;
		content: "\f005"; 
		font-family: "Font Awesome 5 Free"; 
		font-weight: 900;
		color: #ffffff;
		position: absolute;
	}
}


/* 装飾用 */
.news_box{
	font-size: 1.4rem;
	background-color: var(--backgroundcolor);
	border-radius: 1rem;
	padding: 1.5rem 2rem;
	box-shadow: 0px 0px 3px #bfbfbf;
	margin: 1rem 0rem 0rem 0rem;
	line-height: 2.5rem;
}
.news_box_yellow{
	font-size: 1.4rem;
	background-color: var(--lightyellow);
	border-radius: 1rem;
	padding: 1.5rem 2rem;
	box-shadow: 0px 0px 3px #d4cd7f;
	margin: 1rem 0rem 0rem 0rem;
	line-height: 2.5rem;
}
.news_box b, .news_box_yellow b{
	font-size: 1.4rem;
}