@charset "UTF-8";
/* -------------------------
   TITLE
------------------------- */
#firstitle {
  background: url("../images/blog/title-main.jpg") no-repeat center center;
  background-size: cover;}
@media screen and (max-width: 768px) {
  #firstitle {
    background-position: right center;}}

/* -------------------------
   ARTICLE
------------------------- */
#article { padding: 80px 0;}
#article .list {
  justify-content: center;
  padding-bottom: 100px;
  display: flex;
  flex-wrap: wrap;
  gap: 75px 24px;}
#article .list a { width: 364px;}
#article .list .photo {  margin-bottom: 8px;}
#article .list .photo img {
  width: 100%;
  height: 210px;
  object-fit: cover;}
#article .pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
  font-size: 20px;
  padding: 30px 0;}
#article .page-btn {
  display: flex;
  align-items: center;
  gap: 24px;}
#article .arrow {
  width: 26px;
  height: 26px;
  background: var(--color-accent);
  border-radius: 50%;
  position: relative;
  display: inline-block;}
#article .arrow::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: translate(-50%, -50%) rotate(45deg);}
#article .arrow.left::before { transform: translate(-50%, -50%) rotate(-135deg);margin-left: 2px;}
#article .arrow.right::before { transform: translate(-50%, -50%) rotate(45deg);margin-left: -2px;}
#article .page-numbers {
  display: flex;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 0;}
#article .page-numbers a {
  display: inline-block;
  width: 32px;
  height: 32px;
  line-height: 32px;
  text-align: center;
  color: var(--color-accent);
  background: #fff;
  border-radius: 4px;}
#article .page-numbers .active {
  display: inline-block;
  width: 32px;
  height: 32px;
  line-height: 32px;
  text-align: center;
  border-radius: 4px;
  background: var(--color-accent);
  color: #fff;}
@media screen and (max-width: 768px) {
  #article { padding: 56px 0 0;}
  #article .list { gap:24px; padding-bottom: 20px;}
  #article .list a { width: 100%;}
  #article .list a img { width: 100%;}
  #article .pagination { font-size: 15px; gap:20px;}
  #article .page-numbers { font-size: 12px;gap:4px;}
  #article .page-btn { gap:10px;}
  #article .page-numbers a,#article .page-numbers .active { width: 22px;height: 22px;line-height: 22px;}}

/* -------------------------
   BLOG
------------------------- */
#blog { padding: 80px 0 0;}
#blog .title {
	border-bottom: 1px solid #999;
	padding-bottom: 56px;
	margin-bottom: 56px;}
#blog .title .flex {
	margin-top: 8px;
	display: flex;
	gap:16px;
	align-items: center;}
#blog .title .flex .day { font-size: 18px;}
#blog .title .flex .category {
	background: #fff;
	padding: 4px 15px;
	border-radius: 4px;
	font-size: 18px;}
#blog .title .flex .works-category-list {
  display: flex;
  gap:4px;
  flex-wrap: wrap;}
#blog .title .flex .works-category-list a {
	background: var(--color-main);
	color: #fff;
	padding: 4px 15px;
	border-radius: 4px;
	font-size: 14px;}
#blog .pagination {
	margin-top: 56px;
	border-top: 1px solid #999;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 80px;
  font-size: 20px;
  padding: 30px 0;}
#blog .page-btn {
  display: flex;
  align-items: center;
  gap: 24px;}
#blog .arrow {
  width: 26px;
  height: 26px;
  background: var(--color-accent);
  border-radius: 50%;
  position: relative;
  display: inline-block;}
#blog .arrow::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: translate(-50%, -50%) rotate(45deg);}
#blog .arrow.left::before { transform: translate(-50%, -50%) rotate(-135deg);margin-left: 2px;}
#blog .arrow.right::before { transform: translate(-50%, -50%) rotate(45deg);margin-left: -2px;}
#blog .page-numbers {
  display: flex;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 0;}
#blog .page-numbers a {
  display: inline-block;
  width: 32px;
  height: 32px;
  line-height: 32px;
  text-align: center;
  color: var(--color-accent);
  background: #fff;
  border-radius: 4px;}
#blog .page-numbers .active {
  display: inline-block;
  width: 32px;
  height: 32px;
  line-height: 32px;
  text-align: center;
  border-radius: 4px;
  background: var(--color-accent);
  color: #fff;}
#blog .listback {
	padding: 0 80px;
	border-left: 1px solid #999;
	border-right: 1px solid #999;}
@media screen and (max-width: 768px) {
  #blog { padding: 56px 0 0;}
	#blog .title { padding-bottom: 40px; margin-bottom: 40px;}
	#blog .title .flex .category { font-size: 14px; padding: 4px 10px;}
	#blog .title .flex .day { font-size: 12px;}
  #blog .pagination {
		font-size: 15px; gap:20px;
		margin-top: 40px;
		justify-content: space-between;
		padding: 40px 0;}
  #blog .page-numbers { font-size: 12px;gap:4px;}
  #blog .page-btn { gap:10px;}
  #blog .page-numbers a { width: 22px;height: 22px;line-height: 22px;}
	#blog .listback { padding: 0 30px;}}

/* -------------------------
   記事の設定
------------------------- */
#entry p {
	margin-bottom: 1em;
	font-size: 18px;}
#entry h2,
#entry h3,
#entry h4,
#entry h5 {
  line-height: 1.4;
  font-weight: 700;
  margin: 2em 0 0.5em;}
#entry h2 { font-size: 24px;}
#entry h3 { font-size: 20px;font-weight: 500;text-decoration: underline;}
#entry h4,#entry h5 { font-size: 18px;}
#entry a {
	display: inline-block;
  text-decoration: underline;}
#entry ul,
#entry ol { margin: 1.5em 0 1.5em 1.5em;}
#entry ul li {
  list-style: disc;
  margin-bottom: .5em;}
#entry ol li {
  list-style: decimal;
  margin-bottom: .5em;}
@media screen and (max-width: 768px) {
	#entry p { font-size: 14px;}
	#entry h2 { font-size: 18px;}
	#entry h3 { font-size: 16px;}
	#entry h4,#entry h5 { font-size: 14px;}}

/* -------------------------
   RELATED
------------------------- */
#related { padding: 56px 0 80px;}
#related .textbox {
  position: relative;
  background: #fff;
  border: 1px solid var(--color-main);
  padding: 48px 38px;}
#related .titlearea {
  display: flex;
  justify-content: space-between;}
#related .list { font-size: 20px;}
#related .list p a {
  color: var(--color-main);
  font-weight: 500;}
#related .list li {
  padding: 24px 0;
  border-bottom: 1px solid #33333388;}
#related .list li:last-child { border: none;}

@media screen and (max-width: 768px) {
  #related { padding: 0;}
	#related .textbox { padding: 24px 12px 32px}
  #related .titlearea { display: block;}
  #related .list { font-size: 14px; line-height: 1.5;}
	#related .list li { padding: 16px 0;}
  #related .list li a{ margin-top: 8px;}}