@charset "utf-8";
 /* すべてに適応 */
*{
	box-sizing: border-box;
	scroll-behavior: smooth;
}
body {
	margin: 0;
	padding: 0;
	max-width: 100%;
	height: auto;
}
.block-page-block {
	max-width: 100%;
	height: auto;
	display: flex;
	justify-content: center;
}
.block-page-block--contents.block-page-block--contents-text {
	text-align: left;
}

/*　メインエリアに適応 */
.block-page-block--frame {
	max-width: 1000px;
	width: 100%;
	height: auto;
	margin: 30px 10px;
}
.block-page-block--contents-body-text-2column {
	color: #333f49;
}
.blog-title h2 {
 	position: relative;
 	padding: 0.5em;
 	background: #6ACBDc;
 	color: #fff;
	border-bottom: none;
	margin-top: 15px;
	margin-bottom: 1%;
}
.blog-title h2::before {
 	position: absolute;
 	content: '';
 	top: 100%;
 	left: 0;
 	border: none;
 	border-bottom: solid 15px transparent;
 	border-right: solid 20px rgb(149, 158, 155);
}
.blog-title h6 {
	margin-bottom: 2%;
	margin-right: 0.5em;
	text-align: right;
	font-weight: 400;
}
.blog-title h3 {
	border-bottom: none;
	margin: 0;
}
.blog-title p {
	margin: 20px 40px;
}
.blog-title .top-banner {
	text-align: center;
	width: 1000px;
}
	/* - こんな人におすすめ！- */
.recommendation-blog {
 	position: relative;
 	background: #FFE4D2;
 	line-height: 1.4;
 	padding: 0.25em 0.5em;
	width: 100%;
 	margin: 4% auto 0 auto;
 	border-radius: 0 10px 10px 10px;
	border: 2px dashed #FFAD72; 
}
.recommendation-blog:after {
 	position: absolute;
 	font-family: "Font Awesome 5 Free",'Quicksand','Avenir','Arial',sans-serif;
 	font-weight: 900;
 	content: '\f00c Check';
 	background: #ff6b00;
 	color: #fff;
 	left: 0px;
 	bottom: 100%;
 	border-radius: 5px 5px 0 0;
 	padding: 5px 7px 1px;
 	font-size: 1em;
 	line-height: 1em;
 	letter-spacing: 0.05em;
}
.recommendation-blog h3 {
	color: #1c2c4c;
	padding: 12px 10px;
	border-bottom: none;
	margin-bottom: 0;
}
.recommendation-blog ul {
	list-style-type: none;
	margin-left: 1em;
	margin-bottom: 1em;
}
.recommendation-blog ul li:before {
	font-family: 'Font Awesome 5 Free';
  	content: '\f00c';    
  	font-weight: 900; 
  	color: #1c2c4c;    
  	margin-right: 0.5em;
}
	/* - 目次 - */
.blog-main-index h3 {
	color: #1c2c4c;
	padding: 12px 20px;
}
.blog-main-index ul {
	list-style-type: none;
	margin-left: 2em;
	margin-bottom: 1em;
	margin-right: 1em;
} 
.blog-main-index {
	width: 100%;
	border: solid 2px #283F6E;
	background: #fff;
	border-radius: 5px;
	margin: 2% auto 0 auto;
}
.blog-number {
	padding-right: 10px;
}
.blog-main-index li {
	color: #333f49;
	margin-left: 5px;
	width: auto;
	text-indent: -1.5em;     
  	padding-left: 1em;  
	margin: 0.5em;
}
.blog-main-index li a {
	text-decoration: none;
}
.blog-main-index li a:hover {
	color: #828B93;
}
	/* - 本文 - */
.blog-main-text {
	margin: 2% 5px;
}
/*.blog-main-text h2 {
	border-bottom: none;
	padding: 0.5em;
	background: #E6F3F5;
	border-left: solid 8px #1fc2de;
	color: #333f49; 
}*/
.blog-main-text h2 {
  color: #1fc2de!important;
  padding: 0.5em;
  border-top: solid 2px #1fc2de;
  border-bottom: solid 2px #1fc2de;
}
.blog-main-text h2 a {
	color: #1fc2de;
	text-decoration: none;
}
.blog-main-text p {
	margin-left: 0;
	margin-bottom: 2em;
	margin-top: 2em;
}
.blog-main-text p a {
	color: #1fc2de;
}
.blog-main-text p strong {
	font-weight: bold;
}
.blog-main-text h3 {
	color: #1fc2de;
	padding-left: 0.5em;
	padding-bottom: 0;
	margin-top: 15px;
	border-bottom: dashed 1px #1fc2de;
}
.blog-main-text table tr:nth-of-type(2n+1) td {
	background-color: #CCE8F2;
	border: #fff solid 2px;
}
.blog-main-text table tr:nth-of-type(2n) td {
	background-color: #E7F4F9;
	border: #fff solid 2px;
}
.blog-main-text table tr td {
	padding: 5px;
}
.blog-main-text table tr td strong {
	font-weight: bold;
}
.blog-main-text ol {
	margin-left: 1.5em;
	list-style: none;
	counter-reset: mylist;
}
.blog-main-text ol li {
  counter-increment: mylist;
  margin-bottom: 0.5em;
}
.blog-main-text ol li::before {
	content: counter(mylist) ". ";
 	margin-right: 0.5em;
	color: #333f49;
}
.blog-main-text ul {
	margin-left: 1.5em;
	list-style:  none;
	padding-left: 0;
}
.blog-main-text ul li::before {
	content: "・";
	color: #333f49;
	margin-right: 0.5em;
	display: inline-block;
}
.main-blog-block .blog-main-text img {
	width: 500px!important;
	height: auto!important;
	margin-bottom: -1.5em;
}
	/* - 詳細へ -　*/
.blog-buy-block {
	display: flex;
	flex-wrap: wrap;
	max-width: 100%;
	width: 100%;
	height: auto;
	margin: 0 0 50px;
	justify-content: flex-start;
}
.blog-buy {
	width: 100%;
	height: auto;
	margin: 0;
}
/*div.jump-blog-page {
	max-width: 100%;
	width: max-content;
	background: #1c2c4c;
	color: #fff;
	padding: 10px 0.5em 10px 1.5em;
	cursor: pointer;
	border-radius: 30px;
	text-decoration: none;
	border: 2px solid transparent;
	transition: background 0.3s,color 0.3s,border-color 0.3s;
}
div.jump-blog-page:hover {
	border: #1c2c4c solid 2px;
	color: #1c2c4c;
	background: #fff;
}
div.jump-blog-page:after {
	font-family: 'Font Awesome 5 Free';
	content: '\f054';
	font-weight: 900; 
  	color: #fff;    
  	padding-right: 0.5em;
	padding-left: 0.8em; 
}
div.jump-blog-page:hover:after {
	color: #1c2c4c;
}*/
div.jump-blog-page a {
	max-width: 100%;
	width: max-content;
	background: #1c2c4c;
	color: #fff;
	padding: 10px 0.5em 10px 1.5em;
	cursor: pointer;
	border-radius: 30px;
	text-decoration: none;
	border: 2px solid transparent;
	transition: background 0.3s,color 0.3s,border-color 0.3s;
}
div.jump-blog-page a:hover {
	border: #1c2c4c solid 2px;
	color: #1c2c4c;
	background: #fff;
}
div.jump-blog-page a:after {
	font-family: 'Font Awesome 5 Free';
	content: '\f054';
	font-weight: 900; 
  	color: #fff;    
  	padding-right: 0.5em;
	padding-left: 0.8em; 
}
div.jump-blog-page a:hover:after {
	color: #1c2c4c;
}
@media(max-width:1000px) {
	.block-page-block--frame {
		max-width: 900px;
		width: 100%;
		height: auto;
		margin: 0 10px 30px;
	}
	.blog-title .top-banner {
		text-align: center;
		width: 100%;
	}
}
@media(max-width:767px) {
	.blog-main-text h2 {
		margin-bottom: 15px;
	}
	.blog-main-text h3 {
		padding-top: 15px;
		margin-bottom: 15px;
	}
}
@media(max-width: 520px) {
	.blog-main-text table {
		max-width: 100%;
	}
}
@media(max-width: 430px) {
	.block-page-block  {
		margin-left: 7px;
		margin-right: 7px;
	}
	div.jump-blog-page a {
		display: inline-block;
		width: 100%;
		height: auto;
	}
}