@charset "UTF-8";
/******************** POST ********************/

/*** --------------- Post Area --------------- ***/
.post_area {
  margin-top: 20px;
}

@media screen and (max-width: 575px) {
  .post_area {
    margin-top: 15px;
  }
}

/* ----- Post Category ----- */
.post_cate_box {
	display: flex;
	flex-wrap: wrap;
  align-items: center;
	gap: 5px 12px;
}
.post_cate {
  display: inline-block;
  padding: 4px 12px;
  background: var(--color-back-w);
  font-size: var(--size-14);
  transition: 0.3s;
}
.post_tag {
  display: inline-block;
  font-size: var(--size-14);
  position: relative;
  transition: 0.3s;
}
.post_tag::before {
  content: '#';
  padding-right: 3px;
}

/*** --------------- Post Archive --------------- ***/
.post_list {
  padding: 100px 100px 80px;
	background: var(--color-back-b);
	border-radius: 10px;
	color: var(--color-text);
}
.post_list .post_box {
  position: relative;
}
.post_list .post_box:first-of-type::before {
  content: '';
  width: 100%;
  height: 2px;
  background: var(--color-back-w);
  position: absolute;
  top: 0;
  left: 0;
}
.post_list .post_box::after {
  content: '';
  width: 100%;
  height: 2px;
  background: var(--color-back-w);
  position: absolute;
  bottom: 0;
  left: 0;
}
.post_list .post_box a {
	display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px 30px;
	width: 100%;
  padding: 30px 0;
  position: relative;
}
.post_list .post_box a:hover {
  background: var(--color-back-p);
	box-shadow: none;
}
.post_list .post_box .post_img {
  width: 300px;
	overflow: hidden;
  position: relative;
  transition: 0.3s;
}
.post_list .post_box .post_img::before {
	content: '';
	display: block;
	padding-top: 70%;
}
.post_list .post_box .post_img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 50%;
	position: absolute;
	top: 0;
	left: 0;
  transition: 0.3s;
}
.post_list .post_box a:hover .post_img img {
	transform: scale(1.1, 1.1);
}
.post_list .post_box .post_text {
  width: calc(100% - 330px);
}
.post_list .post_box .post_date {
  margin: 0;
	color: var(--color-text);
  font-size: var(--size-14);
}
.post_list .post_box .post_title {
  margin-top: 10px;
	font-size: var(--size-20);
  line-height: 1.8;
}
.post_list .post_box .post_title .line {
  padding-bottom: 5px;
  background-image: linear-gradient(to bottom, var(--color-main), var(--color-main));
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 0% 1.5px;
  transition: 0.3s ease-out;
}
.post_list .post_box a:hover .post_title .line {
  background-size: 100% 1.5px;
}
.post_list .post_box a .new {
  display: inline-block;
  margin-top: 4px;
  margin-left: 10px;
	padding: 1px 8px;
	background: var(--color-ba-re);
  color: var(--color-back-w);
  font-size: 60%;
  vertical-align: text-top;
}
.post_list .post_box .post_cate_box {
  margin-top: 20px;
}

@media screen and (max-width: 991px) {
  .post_list {
  	padding: 50px 50px 60px;
  }
  .post_list .post_box .post_img {
    width: 200px;
  }
  .post_list .post_box .post_text {
    width: calc(100% - 230px);
  }
}
@media screen and (max-width: 767px) {
  .post_list .post_box a {
    justify-content: center;
  }
  .post_list .post_box .post_img {
    width: 300px;
  }
  .post_list .post_box .post_text {
    width: 100%;
  }
}
@media screen and (max-width: 575px) {
	.post_list {
		justify-content: center;
    margin-top: 10px;
		padding: 30px 20px 50px;
	}
	.post_list .post_box .post_title {
		font-size: var(--size-18);
	}
}

/* ----- Post Archive h1 ----- */
.archive_h1 {
  margin-bottom: 40px;
  font-size: var(--size-28);
  text-align: center;
  line-height: 1.8;
  position: relative;
}
.archive_h1.tag::before {
  content: '#';
  padding-right: 5px;
}

@media screen and (max-width: 991px) {
  .archive_h1 {
    margin-bottom: 30px;
  }
}
@media screen and (max-width: 575px) {
  .archive_h1 {
    font-size: var(--size-24);
    margin-bottom: 15px;
  }
}

/* ----- Post Pagination ----- */
.post_page {
  margin-top: 50px;
}
.post_page .nav-links {
  width: 100%;
}
.post_page ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 15px;
}
.post_page ul li a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  min-height: 40px;
  padding: 5px 10px;
  border: 1.5px solid var(--color-back-w);
}
.post_page ul li a:hover {
  background: var(--color-back-w);
}
.post_page ul li .current {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  min-height: 40px;
  padding: 5px 10px;
  background: var(--color-back-w);
  border: 1.5px solid var(--color-back-w);
}

@media screen and (max-width: 575px) {
  .post_page {
    margin-top: 40px;
  }
}

/*** --------------- Post Content --------------- ***/
.post_content {
  padding: 100px 100px 80px;
	background: var(--color-back-b);
	border-radius: 10px;
	color: var(--color-text);
}
.post_content .post_info {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 20px;
}
.post_content .post_date {
  margin: 0;
}
.post_content .post_cate_box {
  justify-content: flex-end;
  margin-left: auto;
}
.post_content .post_cate_box a:hover .post_cate {
  background: var(--color-sub);
}
.post_content .post_cate_box a:hover .post_tag {
  color: var(--color-ba-re);
}
.post_content .post_h1 {
  margin-bottom: 30px;
  padding: 20px 0 25px;
  font-size: var(--size-28);
  line-height: 1.5;
  position: relative;
}
.post_content .post_h1::before {
  content: '';
  width: 100%;
  height: 3px;
  background: var(--color-ba-re);
  border-radius: 1.5px;
  position: absolute;
  bottom: 0;
  left: 0;
}
.post_content h2 {
  margin-top: 40px;
  padding: 15px 20px;
  background: var(--color-ba-lp);
  border-radius: 5px;
  font-size: var(--size-24);
  line-height: 1.5;
}
.post_content h3 {
  margin-top: 40px;
  padding: 15px;
  font-size: var(--size-20);
  line-height: 1.5;
  position: relative;
}
.post_content h3::before {
  content: '';
  width: 100%;
  height: 4px;
  background: var(--color-ba-lb);
  border-radius: 2px;
  position: absolute;
  top: 0;
  left: 0;
}
.post_content h3::after {
  content: '';
  width: 100%;
  height: 4px;
  background: var(--color-ba-lb);
  border-radius: 2px;
  position: absolute;
  bottom: 0;
  left: 0;
}
.post_content h4 {
  margin-top: 40px;
  padding: 10px 15px;
  background: var(--color-ba-lg);
  border-radius: 5px;
  font-size: var(--size-18);
  line-height: 1.5;
}
.post_content h5 {
  margin-top: 40px;
  padding: 0 10px 10px;
  font-size: var(--size-18);
  line-height: 1.5;
  position: relative;
}
.post_content h5::after {
  content: '';
  width: 100%;
  height: 3px;
  background: var(--color-ba-pi);
  border-radius: 1.5px;
  position: absolute;
  bottom: 0;
  left: 0;
}
.post_content h6 {
  width: calc(100% + 10px);
  margin-top: 30px;
  padding-left: 30px;
  font-size: var(--size-16);
  line-height: 1.5;
  position: relative;
}
.post_content h6::before {
  content: '';
  width: 16px;
  height: 16px;
  background: var(--color-ba-ye);
  border-radius: 2px;
  position: absolute;
  top: calc(50% - 8px);
  left: 5px;
  transform: rotate(45deg);
}
.post_content .wp-block-image,
.post_content .wp-block-columns {
  margin: 25px 0 0;
}
.post_content .wp-block-columns .wp-block-image {
  margin: 0;
}
.post_content .wp-block-image a:hover {
  opacity: 0.8;
}
.post_content .wp-block-image figcaption {
  margin: 5px 0 0;
  font-size: var(--size-14);
  text-align: center;
}
.post_content img {
  border-radius: 10px;
}
.post_content p a {
  border-bottom: 1px solid var(--color-main);
}
.post_content p a:hover {
  border-color: var(--color-ba-re);
  color: var(--color-ba-re);
}
.post_content .wp-block-list {
  margin: 25px 0 0 30px;
}
.post_content .wp-block-list li:not(:first-of-type) {
  margin-top: 5px;
}
.post_content ul.wp-block-list li {
  position: relative;
}
.post_content ul.wp-block-list li::before {
  content: '';
  width: 15px;
  height: 16px;
  background: var(--color-ba-re);
  clip-path: path('M10.3379 0.529297C11.1094 0.715382 11.8352 1.0351 12.4756 1.47168C13.3854 2.23217 14.0841 3.18167 14.5137 4.24023C14.9431 5.29873 15.0914 6.43605 14.9453 7.55762C14.5143 10.8884 12.8025 13.703 11.1484 14.9365C10.5726 15.3889 9.88872 15.7106 9.15234 15.875C8.41603 16.0394 7.64787 16.0418 6.91016 15.8828C6.27687 15.6432 6.49694 14.6749 6.78223 13.4033C7.06775 12.1306 9.08003 2.93419 9.2334 2.14844C9.38613 1.36556 9.72402 0.52215 10.3379 0.529297ZM5.45605 0.161133C6.23378 -0.0115902 7.04033 -0.0458882 7.83203 0.0605469C8.40057 0.275109 8.35432 1.1754 8.16211 1.94727C7.9696 2.72049 5.91504 11.9169 5.63281 13.1865C5.35066 14.4558 5.14642 15.4291 4.46289 15.4238C3.71588 15.306 3.00951 15.0277 2.40137 14.6123C1.79326 14.1969 1.29959 13.6562 0.961914 13.0332C-0.0375876 11.3065 -0.417125 8.10105 0.600586 4.87891C0.942479 3.79466 1.56099 2.80097 2.40527 1.98047C3.24986 1.15977 4.29604 0.535969 5.45605 0.161133Z');
  position: absolute;
  top: 7px;
  left: -22px;
}
.post_content .wp-block-buttons {
  gap: 15px;
  margin-top: 25px;
}
.post_content .wp-block-button a {
  display: inline-block;
  padding: 10px 50px 10px 25px;
  background: none;
  border: 1px solid var(--color-main);
  border-radius: 0;
  color: var(--color-main);
  position: relative;
}
.post_content .wp-block-button a:hover {
  background: var(--color-back-w);
}
.post_content .wp-block-button a::after {
  content: '';
	width: 18px;
	aspect-ratio: 18 /  6;
	background: var(--color-main);
	position: absolute;
	top: calc(50% -  3px);
	right: 15px;
	clip-path: path('M18 6H0V4.44587H15.1992L12.8852 0.870152L14.1162 0L18 6Z');
  transition: 0.3s;
}
.post_content .wp-block-button a:hover::after {
  right: 10px;
}
.post_content .wp-block-file {
  margin: 25px 0 0;
}
.post_content .wp-block-file a {
  border-bottom: 1px solid var(--color-main);
}
.post_content .wp-block-file a:hover {
  border-color: var(--color-ba-re);
  color: var(--color-ba-re);
}
.post_content .wp-block-file .wp-block-file__button {
  background: none;
  border: 1px solid var(--color-main);
  color: var(--color-main);
}
.post_content .wp-block-file .wp-block-file__button:hover {
  background: var(--color-back-w);
  border: 1px solid var(--color-main);
  color: var(--color-main);
}

@media screen and (max-width: 991px) {
	.post_content {
		padding: 50px 50px 60px;
	}
}
@media screen and (max-width: 575px) {
  .post_content {
    margin-top: 10px;
		padding: 30px 20px 50px;
  }
}

/* ----- Post Author ----- */
.post_author {
	margin-top: 120px;
	padding: 20px;
	background: #FFF;
	border-radius: 10px;
}
.post_author h2 {
	width: 100%;
	margin: 0;
  padding: 5px 15px 15px;
	background: none;
  font-size: 112.5%;
  position: relative;
	left: 0;
}
.post_author h2::before {
  content: none;
}
.post_author h2::after {
  content: '';
  width: 100%;
  height: 1.5px;
  background: var(--color-ba-pu);
  border-radius: 1px;
  position: absolute;
  bottom: 0;
  left: 0;
}
.post_author .author_box {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	margin-top: 20px;
	gap: 20px;
}
.post_author .img_box img {
	width: 150px;
	height: 150px;
	border-radius: 10px;
}
.post_author .text_box {
	width: calc(100% - 180px);
}
.post_author h3 {
	width: 100%;
	margin: 0;
	padding: 0 0 0 22px;
	font-size: 100%;
	position: relative;
	left: 0;
}
.post_author h3::before {
	content: '';
  width: 15px;
  height: 16px;
  background: var(--color-ba-pu);
  clip-path: path('M10.3379 0.529297C11.1094 0.715382 11.8352 1.0351 12.4756 1.47168C13.3854 2.23217 14.0841 3.18167 14.5137 4.24023C14.9431 5.29873 15.0914 6.43605 14.9453 7.55762C14.5143 10.8884 12.8025 13.703 11.1484 14.9365C10.5726 15.3889 9.88872 15.7106 9.15234 15.875C8.41603 16.0394 7.64787 16.0418 6.91016 15.8828C6.27687 15.6432 6.49694 14.6749 6.78223 13.4033C7.06775 12.1306 9.08003 2.93419 9.2334 2.14844C9.38613 1.36556 9.72402 0.52215 10.3379 0.529297ZM5.45605 0.161133C6.23378 -0.0115902 7.04033 -0.0458882 7.83203 0.0605469C8.40057 0.275109 8.35432 1.1754 8.16211 1.94727C7.9696 2.72049 5.91504 11.9169 5.63281 13.1865C5.35066 14.4558 5.14642 15.4291 4.46289 15.4238C3.71588 15.306 3.00951 15.0277 2.40137 14.6123C1.79326 14.1969 1.29959 13.6562 0.961914 13.0332C-0.0375876 11.3065 -0.417125 8.10105 0.600586 4.87891C0.942479 3.79466 1.56099 2.80097 2.40527 1.98047C3.24986 1.15977 4.29604 0.535969 5.45605 0.161133Z');
  position: absolute;
  top: 5px;
  left: 0;
}
.post_author h3::after {
	content: none;
}
.post_author .author_info {
	margin-top: 10px;
	font-size: 14px;
}

@media screen and (max-width: 991px) {
  .post_author {
    margin-top: 100px;
  }
}
@media screen and (max-width: 575px) {
  .post_author {
    margin-top: 80px;
  }
}
@media screen and (max-width: 575px) {
	.post_author .text_box {
		width: 100%;
	}
}

/* ----- Post PrevNext ----- */
.post_prevnext {
  display: flex;
  justify-content: space-between;
  margin-top: 50px;
}
.post_prevnext li {
  width: calc((100% - 60px) / 3);
}
.post_prevnext li a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 12px 20px;
  border: 1.5px solid var(--color-back-w);
  font-size: var(--size-14);
  text-align: center;
  line-height: 1.5;
  position: relative;
}
.post_prevnext li a:hover {
  background: var(--color-back-w);
}
.post_prevnext li.prev a {
  padding-left: 40px;
}
.post_prevnext li.next a {
  padding-right: 40px;
}
.post_prevnext li.prev a::after {
  content: '';
	width: 18px;
	aspect-ratio: 18 /  6;
	background: var(--color-main);
	position: absolute;
	top: calc(50% -  3px);
	left: 20px;
	clip-path: path('M18 6H0V4.44587H15.1992L12.8852 0.870152L14.1162 0L18 6Z');
  transition: 0.3s;
  transform: scaleX(-1);
}
.post_prevnext li.prev a:hover::after {
  left: 15px;
}
.post_prevnext li.next a::after {
  content: '';
	width: 18px;
	aspect-ratio: 18 /  6;
	background: var(--color-main);
	position: absolute;
	top: calc(50% -  3px);
	right: 20px;
	clip-path: path('M18 6H0V4.44587H15.1992L12.8852 0.870152L14.1162 0L18 6Z');
  transition: 0.3s;
}
.post_prevnext li.next a:hover::after {
  right: 15px;
}
.post_prevnext li a span {
	font-family: "Sorts Mill Goudy", "Shippori Mincho B1";
  font-size: var(--size-18);
  position: relative;
  top: 3px;
}

@media screen and (max-width: 991px) {
  .post_prevnext li {
    width: calc((100% - 40px) / 3);
  }
}
@media screen and (max-width: 767px) {
  .post_prevnext li.prev a {
    padding-left: 20px;
  }
  .post_prevnext li.next a {
    padding-right: 20px;
  }
  .post_prevnext li.prev a::after,
  .post_prevnext li.next a::after {
    content: none;
  }
}
@media screen and (max-width: 575px) {
  .post_prevnext li a {
    padding: 10px;
  }
  .post_prevnext li.prev a {
    padding-left: 10px;
  }
  .post_prevnext li.next a {
    padding-right: 10px;
  }
}

/*** --------------- Post Sidebar --------------- ***/
.side_area {
  display: flex;
  flex-wrap: wrap;
  gap: 80px;
  margin-top: 100px;
}
.side_area .side_box {
  flex: 1;
  border-radius: 10px;
}
.side_area .side_box h2 {
  display: flex;
  align-items: center;
  gap: 20px;
  color: var(--color-sub);
  font-family: "Sorts Mill Goudy";
  font-size: var(--size-28);
  text-align: center;
  position: relative;
}
.side_area .side_box h2::before {
  content: '';
  display: block;
  width: 100%;
  height: 1.5px;
  background: var(--color-sub);
  border-radius: 1px;
  position: relative;
  top: -5px;
}
.side_area .side_box h2::after {
  content: '';
  display: block;
  width: 100%;
  height: 1.5px;
  background: var(--color-sub);
  border-radius: 1px;
  position: relative;
  top: -2px;
}
.side_area .side_box ul {
  margin-top: 12px;
}
.side_area .side_box ul li a {
  display: inline-block;
  width: 100%;
  padding: 5px 40px 5px 15px;
  color: var(--color-back-w);
  position: relative;
}
.side_area .side_box ul li a:hover {
  color: var(--color-sub);
}
.side_area .side_box ul li a::after {
  content: '';
	width: 18px;
	aspect-ratio: 18 /  6;
	background: var(--color-back-w);
	position: absolute;
	top: calc(50% -  3px);
	right: 15px;
	clip-path: path('M18 6H0V4.44587H15.1992L12.8852 0.870152L14.1162 0L18 6Z');
  transition: 0.3s;
}
.side_area .side_box ul li a:hover::after {
  background: var(--color-sub);
  right: 10px;
}
.side_area .side_box ul.tag_list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  font-size: var(--size-14);
}
.side_area .side_box ul.tag_list li a {
  width: auto;
  padding: 5px 10px;
}
.side_area .side_box ul.tag_list li a::before {
  content: '#';
  padding-right: 3px;
}
.side_area .side_box ul.tag_list li a::after {
  content: none;
}
.side_area .side_box ul.month_list {
  margin: 0 0 0 10px;
  font-size: var(--size-14);
}
.side_area .side_box ul li button {
  display: inline-block;
  width: 100%;
  padding: 5px 40px 5px 15px;
  letter-spacing: 0.1em;
  transition: 0.3s;
  position: relative;
}
.side_area .side_box ul li button:hover,
.side_area .side_box ul li button[aria-expanded="true"] {
  color: var(--color-sub);
}
.side_area .side_box ul li button::after {
  content: '';
	width: 18px;
	aspect-ratio: 18 /  6;
	background: var(--color-back-w);
	position: absolute;
	top: calc(50% -  3px);
	right: 15px;
	clip-path: path('M18 6H0V4.44587H15.1992L12.8852 0.870152L14.1162 0L18 6Z');
  transition: 0.3s;
}
.side_area .side_box ul li button[aria-expanded="true"]::after {
  background: var(--color-sub);
  transform: rotate(90deg);
}

@media screen and (max-width: 991px) {
  .side_area {
    gap: 60px;
    margin-top: 80px;
  }
  .side_area .side_box {
    flex: auto;
    width: 100%;
  }
}
@media screen and (max-width: 575px) {
  .side_area {
    gap: 50px;
    margin-top: 60px;
  }
}