/* --------------------------------------------------- */
#area1 {
	max-width: 1300px;
	width: 90%;
	margin: 0 auto 100px;
	display: flex;
	justify-content: space-between;
}
/*----------------------*/
#blog-list {
	max-width: 1400px;
	width: 90%;
	margin: 0 auto 100px;
}
#blog-left {
	width: 70%;
	margin-bottom: 60px;
}
#blog-right {
	width: 25%;
}
/*----------------------*/

#blog-right ul {
	margin-bottom: 30px;
}
#blog-right li {
	font-size: 13px;
	line-height: 160%;
}
#blog-right .blog-r-nav1 {
}
#blog-left .blog-l-nav1 {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
#blog-right .blog-r-nav1 li {
	border-bottom: #aaa 1px dashed;
}
#blog-left .blog-l-nav1 li {
	width: 49%;
	margin-bottom: 1%;
	font-size: 13px;
	line-height: 160%;
}
#blog-right .blog-r-nav1 li a,
#blog-left .blog-l-nav1 li a {
	display: flex;
	justify-content: flex-start;
	padding: 10px 5px 10px 10px;
}
#blog-right .blog-r-nav1 li .ph,
#blog-left .blog-l-nav1 li .ph {
	width: 70px;
	padding-top: 70px;
	overflow: hidden;
	margin-right: 15px;
	position: relative;
  flex-shrink: 0;
}
#blog-right .blog-r-nav1 li .ph img,
#blog-left .blog-l-nav1 li .ph img {
	position: absolute;
    width: 100%;
	min-width: 100%;
    height: 100%;
	min-height: 100%;
    top: 0;
    object-fit: cover;
}
#blog-right .blog-r-nav1 li p,
#blog-left .blog-l-nav1 li p {
}
#blog-right .blog-r-nav1 li p .day,
#blog-left .blog-l-nav1 li p .day {
	display: block;
	font-weight: 600;
	font-size: 9px;
}
#blog-right .blog-r-nav1 li a:hover,
#blog-left .blog-l-nav1 li a:hover {
	background-color: #F0E88E;
	color: #222;
}
#blog-right .blog-r-nav2,
#blog-right .blog-r-nav4 {
}
#blog-right .blog-r-nav2 li,
#blog-right .blog-r-nav4 li {
	margin-bottom: 3px;
}
#blog-right .blog-r-nav2 li a,
#blog-right .blog-r-nav4 li a {
	display: block;
	background-color: #f5f5f5;
	padding: 8px 12px 9px;
}
#blog-right .blog-r-nav4 li a {
	padding: 14px 15px 15px;
}
#blog-right .blog-r-nav2 li a:hover,
#blog-right .blog-r-nav4 li a:hover {
	background-color: #F0E88E;
	color: #222;
}
#blog-right .blog-r-nav3 {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	border: #222 1px dashed;
	padding: 10px 15px;
	border-radius: 10px;
}
#blog-right .blog-r-nav3 li {
	margin-right: 5px;
}
#blog-right .blog-r-nav3 li a {
}
#blog-right .blog-r-nav3 li a:hover {
}

/*--　BLOG TOP　--*/
#blog-list ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
}
#blog-list li {
	width: 30%;
	margin-right: 5%;
	margin-bottom: 40px;
}


#blog-list li:nth-child(3n) {
	margin-right: 0;
}
#blog-list li a {
	display: block;
}
#blog-list li a .ph {
	display: block;
	width: 100%;
	padding-top: 55%;
	overflow: hidden;
	position: relative;
	margin-bottom: -5px;
	border: rgba(240,232,142,0) 3px solid;
	transition: .3s;
}
#blog-list li .ph img {
	position: absolute;
    width: 100%;
	min-width: 100%;
    height: 100%;
	min-height: 100%;
    top: 0;
    object-fit: cover;
}
#blog-list li a:hover .ph {
	border: rgba(240,232,142,1) 3px solid;
}
#blog-list li p {
	font-weight: 600;
	line-height: 160%;
	margin-bottom: 20px;
}
#blog-list li .day {
	display: inline-block;
	font-weight: 600;
	font-size: 9px;
}
#blog-list li .day::after {
	content: "/";
	margin: 0 7px;
}
#blog-list li .category {
	display: inline-block;
	font-size: 9px;
}
#blog-list li a .btn {
	font-size: 13px;
	font-weight: 500;
	display: block;
	max-width: 300px;
	width: 100%;
	margin: 0 auto;
	text-align: center;
	background-color: #f5f5f5;
	padding: 5px 0;
	border-radius: 40px;
	transition: .3s;
}
#blog-list li a:hover .btn {
	background-color: #F0E88E;
	color: #222;
}

/* ページネーション追加 */
#blog-list .blog-list__pagination {
  margin-top: 50px;
  padding-bottom: 50px;
}
#blog-list .blog-list__pagination ol {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 20px;
}
#blog-list .blog-list__pagination ol li {
  width: initial;
  margin-right: 0;
  margin-bottom: 0;
}
#blog-list .blog-list__pagination ol li .page-numbers {
  font-size: 16px;
  width: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
#blog-list .blog-list__pagination ol li .page-numbers.current {
  color: #FF5F00;
}


/*--　詳細ページ　タイトルまわり　--*/
#blog-left .blog-ttl {
	border-bottom: #222 2px solid;
	padding-bottom: 20px;
	margin-bottom: 40px;
}
#blog-left .blog-ttl .ttl {
	font-size: 1.6em;
	line-height: 160%;
	font-weight: 500;
}
#blog-left .blog-ttl .data {
	font-size: 12px;
	line-height: 150%;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
}
#blog-left .blog-ttl .day {
	font-weight: 600;
	margin-right: 30px;
}
#blog-left .blog-ttl .category {
	margin-right: 30px;
}
#blog-left .blog-ttl .category::before {
	content: "category";
	color: #aaa;
	margin-right: 10px;
}
#blog-left .blog-ttl .tag {
	display: flex;
	justify-content: flex-start;
  flex-wrap: wrap;
}
#blog-left .blog-ttl .tag::before {
	content: "tag";
	color: #aaa;
	margin-right: 10px;
}
#blog-left .blog-ttl .tag li {
	margin-right: 5px;
}
#blog-left .blog-ttl .tag li::before {
	content: "/";
	margin-right: 5px;
}


/*--　詳細ページ　記事本文　--*/
#blog-left .blog {
	margin-bottom: 50px;
}
#blog-left .blog p {
	margin-bottom: 30px;
}
#blog-left .blog img {
  width: initial;
}
#blog-left .blog p img {
	display: block;
	max-width: 500px;
	width: 90%;
	margin: 0 auto;
}
#blog-left .blog h2 img {
	display: block;
	max-width: 500px;
	width: 90%;
	margin: 0 auto;
}
#blog-left .blog a {
	text-decoration: underline;
}

#blog-left .fixation {
	display: block;
	padding:2em;
	border: 3px solid #eee;	
	position: relative;
	z-index: 0;
	margin-bottom: 50px;
	background: url("../images/blog/logo-img.png") no-repeat right bottom;
	background-size: 250px;
}
#blog-left .fixation::before,
#blog-left .fixation::after {
	content: '';
	display: block;
	position: absolute;
	z-index: 1;
	transition: .3s;
}
#blog-left .fixation::before {
	border-top:3px solid #3bb4e5;
	border-left:3px solid #3bb4e5;
	top: -3px;
	left: -3px;
	width: 20px;
	height: 20px;
}
#blog-left .fixation::after {
	border-bottom: 3px solid #3bb4e5;
	border-right:3px solid #3bb4e5;
	bottom: -3px;
	right: -3px;
	width: 20px;
	height: 20px;
}
#blog-left .fixation:hover {
	border: 3px solid #3bb4e5;	
}
#blog-left .fixation .ttl {
	color: #3bb4e5;
	font-size: 1.2em;
	font-weight: 600;
	line-height: 170%;
	margin-bottom: 20px;
}
#blog-left .fixation .ttl strong {
	display: inline-block;
	font-size: 1.5em;
	margin: 0 5px;
	
	background-color: #3bb4e5;
    color: #fff;
    padding: 0.1em 0.2em 0.2em;
}
#blog-left .fixation p {
	padding-right: 230px;
	line-height: 160%;
}
@media only screen and (max-width: 980px) {
	#area1 {
        width: 95%;
        margin: 0 auto 70px;
    }
	
	#blog-list li p {
		font-size: .9em;
        margin-bottom: 10px;
    }
	#blog-list li a .btn {
        font-size: 12px;
    }
	
    #blog-left {
        width: 65%;
    }

    #blog-right {
        width: 32%;
    }
	#blog-right .blog-r-nav1 li a {
		justify-content: space-between;
        padding: 5px;
		line-height: 150%;
    }
	#blog-right .blog-r-nav1 li .ph {
        width: 30%;
        padding-top: 65px;
        margin-right: 0;
    }
    #blog-right .blog-r-nav1 li p {
		width: 65%;
    }
	#blog-left .blog-ttl .day,
    #blog-left .blog-ttl .category {
        margin-right: 20px;
    }
	#blog-left .fixation {
        padding:1.5em;
        background-size: 210px;
    }
	#blog-left .fixation .ttl {
        line-height: 150%;
        margin-bottom: 20px;
		font-size: 1.1em;
    }
	#blog-left .fixation .ttl strong {
        font-size: 1.5em;
        margin: 0 3px;
        padding: 0.05em 0.15em 0.15em;
    }
	#blog-left .fixation p {
		font-size: .9em;
		font-weight: 500;
		padding-right: 210px;
	}
}
@media only screen and (max-width: 680px) {
	#area1 {
		width: 90%;
		display: block;
        margin: 0 auto 70px;
    }
	#blog-list {
		width: 93%;
	}
	#blog-list li,
	#blog-list li:nth-child(3n) {
        width: 48%;
        margin-right: 4%;
        margin-bottom: 10px;
    }
    #blog-list li:nth-child(2n) {
        margin-right: 0;
    }
	#blog-list li p {
        line-height: 140%;
        margin-bottom: 10px;
    }
	#blog-list li a .btn {
		display: none;
    }
	
    #blog-left {
        width: 100%;
    }
    #blog-right {
        width: 100%;
    }
	
	#blog-left .blog-ttl {
        padding-bottom: 15px;
        margin-bottom: 20px;
    }
    #blog-left .blog-ttl .ttl {
        font-size: 1.5em;
		margin-bottom: 10px;
    }
    #blog-left .blog-ttl .data {
        font-size: 11px;
    }
	
	#blog-left .blog {
        margin-bottom: 40px;
    }
    #blog-left .blog p {
        margin-bottom: 20px;
		line-height: 180%;
    }
	
	#blog-left .fixation {
        padding:1.1em;
        background-size: 150px;
		margin-bottom: 30px;
    }
	#blog-left .fixation .ttl {
        line-height: 160%;
        margin-bottom: 15px;
		font-size: 1em;
    }
	#blog-left .fixation p {
		font-size: .8em;
		padding-right: 130px;
	}
	#blog-left .fixation .ttl strong {
        font-size: 1.3em;
        margin: 0 2px;
        padding: 0.05em 0.15em 0.15em 0.18em;
    }
	
	#blog-left .blog-l-nav1 {
        display: block;
    }
    #blog-left .blog-l-nav1 li {
        width: 100%;
		margin-bottom: 0px;
    }
	#blog-left .blog-l-nav1 li a {
		justify-content: space-between;
        padding: 5px;
		line-height: 150%;
    }
	#blog-left .blog-l-nav1 li .ph {
        width: 20%;
        padding-top: 60px;
        margin-right: 0;
    }
    #blog-left .blog-l-nav1 li p {
		width: 75%;
    }

    #blog-list .blog-list__pagination ol {
      gap: 12px;
    }
    #blog-list .blog-list__pagination ol li .page-numbers {
      font-size: 16px;
      width: 20px;
    }
}
/* --------------------------------------------------- */

/* --------------------------------------------------- */

/* --------------------------------------------------- */

/* --------------------------------------------------- */