@charset 'UTF-8';

pre {
	font-family: 'Noto Sans Japanese', '游ゴシック', YuGothic, 'ヒラギノ角ゴ Pro', 'Hiragino Kaku Gothic Pro', 'メイリオ', 'Meiryo', Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
	width:100%;
	word-break: break-all;
    white-space: pre;          
    white-space: pre-wrap;     
    white-space: pre-line;     
    white-space: -pre-wrap;    
    white-space: -o-pre-wrap;  
    white-space: -moz-pre-wrap;
    white-space: -hp-pre-wrap; 
    word-wrap: break-word;     
}
.news > div {
	width: 70% !important;
	margin-left: 0% !important;
}
.blog > div {
	width: 70% !important;
	margin-left: 30% !important;
} 
.news-list {
	overflow:auto;
	max-height:300px;
}
.news-cont {
	border-bottom:1px solid #ccc;
	padding-top:20px;
	padding-bottom:20px;
}
.news-cont .left {
	flex-basis: 15% !important;
}
.news-cont .right {
	flex-basis: 85% !important;
}
h1.title-01._common {
	font-size: 4rem;
	color:#000;
}
.blog-main {
	width: min(100% - 4rem, var(--width,940px));
	margin: 20px auto;
}
.blog-main {
	display:flex;
	gap:40px;
}
.blog-side {
	width:370px;
}
.blog-side-title {
	font-size: 2rem;
	border-bottom:1px solid #ccc;
}
.side {
	padding-top:20px;
}
.side ul li {
	padding:10px;
	border-bottom:1px solid #ccc;
}
.side ul li :before {
	content:">";
	margin-right:5px;
}
.side ul li a {
	color:#006096;
	text-decoration:none;
}
.card-thumb img {
	width:100%;
}
.blog-main .card {
	display:flex;
	gap:1%;
}
.blog-main .card a {
	font-size: 1.2rem;
	width: calc(100% / var(--width, 3) - 1%);
    margin-bottom: 30px;
}
.content__container .blog-main .blog-side  {
	width: 400px;
}
.index-blog ul {
	display:flex;
	flex-wrap:wrap;
	gap:2%;
}
.index-blog ul li {
	width:32%;
}
.index-blog ul li h2 {
	font-size:21px;
}
.index-blog figure {
	width:100%;
}
@media screen and (max-width: 1400px){
}

@media screen and (max-width: 1200px){
	.blog-side {
		width:300px;
	}
}

@media screen and (max-width: 1000px){
	.blog-side {
		width:350px;
	}
	.index-blog ul {
		gap:3%;
	}
	.index-blog ul li {
		width:47.5%;
	}
}

@media screen and (max-width: 834px){
	.news > div {
    	width: 100% !important;
    	margin-left: 0% !important;
		margin-top:20% !important;
	}
	.blog > div {
    	width: 100% !important;
    	margin-left: 0% !important;
		margin-top:20% !important;
	}
	.blog-side {
		width:100%;
	}
	.blog-main {
		flex-direction:column;
		gap:40px;
	}
	.content__container .blog-main .blog-side  {
		width: 100%;
	}
	.blog-main .card {
		--width: 2;
	}
}

@media screen and (max-width: 640px){
	.news > div {
		margin-top:10% !important;
	}
	.blog > div {
		margin-top:10% !important;
	}
	.blog-main .card {
		--width: 1;
		display: block;
	}
	.blog-main .card a {
		display:block;
	    margin-bottom: 30px;
	}
}

@media screen and (max-width: 480px){
}