@charset "UTF-8";
/* ==========================================
   Template: modern（https://do.gt-gt.org/）
   Copyright: 2020 do.
   利用規約を遵守の上お使いください。二次配布・販売を禁じます
   ========================================== */
/* ==========================================
  リセットCSS
  基本的には触らないでください
  ========================================== */
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Noto+Serif+JP:wght@200..900&display=swap");
input[type="submit"] {
  -webkit-appearance: none;
  border-radius: 0;
}

html {
  box-sizing: border-box;
  -ms-overflow-style: scrollbar;
  background: #444;
}

*,
*::after,
*::before {
  box-sizing: border-box;
}

img {
  border: none;
  max-width: 100%;
  height: auto;
}

a {
  text-decoration: none;
}

ol,
ul {
  padding: 0;
}

h1,
h2,
h3,
h4,
h5,
img,
p {
  margin: 0;
  padding: 0;
}

hr {
  border: none;
  height: 1px;
  background: #f1eded;
  margin: 2em auto;
  width: 100%;
}

h1,
h2,
h3,
h4,
h5,
p {
  line-height: 200%;
}

.container {
  width: 100%;
  padding:0 20px;
  margin-right: auto;
  margin-left: auto;
}

.flex {
  display: -webkit-box;
  display: flex;
}

.wrap {
  flex-wrap: wrap;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
          flex-direction: column;
}

@media (min-width: 768px) {
  .wrap {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
            flex-direction: row;
  }
}

@media (min-width: 768px) and (max-width: 1059px) {
  .container {
    max-width: 720px;
  }
}

@media (min-width: 1060px) {
  .container {
    max-width: 1000px;
  }
}

body {
  background: #ffffff;
  overflow-x: hidden;
  color: #242424;
  margin: 0;
  padding: 0;
  font-size: 17px;
  font-family: "Noto Sans JP", sans-serif;
}

section {
  padding: 30px 0;
}

section.bgcolor2 {
  background: #f5f2f2;
}

section.bgcolor3 {
  background: #e8e8e8;
}

ul.list {
  list-style: none;
  margin: 1.5em 0;
}

ul.list li {
  position: relative;
  margin-left: 25px;
  margin-bottom: 5px;
}

ul.list li:before {
  content: '';
  display: block;
  width: 8px;
  height: 8px;
  background: #9ed200;
  position: absolute;
  margin: auto;
  top: 9px;
  left: -20px;
}

.comment {
  margin-top: 5px;
}
ul.comment li,ul.commentspace li {
  margin-bottom: 10px;
}

ol.list {
  list-style: none;
  list-style-type: none !important;
  counter-reset: number;
  margin: 1.5em 0;
}

ol.list li {
  position: relative;
  margin-left: 25px;
  margin-bottom: 5px;
}

ol.list li:before {
  position: absolute;
  counter-increment: number;
  content: counter(number);
  font-family: "Noto Sans JP", sans-serif;
  position: absolute;
  margin: auto;
  top: 6px;
  left: -25px;
  background: #9ed200;
  width: 18px;
  height: 18px;
  border-radius: 2px;
  text-align: center;
  line-height: 18px;
}

dl.list dt {
  margin: 40px 0 5px 0;
  font-weight: 400;
  font-size: 20px;
  text-decoration: none;
  color: #4bb322;
}
dl.results {
  background-color: #f2f2f2;
  padding:10px 30px;
}

dl.list dd{
  line-height: 200%;
  margin: 0;
}
dl.list .results dd {
  position: relative;
  margin: 15px 0;
  padding-left: 20px;
}
dl.results dd:before{
  content: '';
  display: block;
  width: 12px;
  height: 12px;
  border-radius: 3px;
  background: #9ed200;
  position: absolute;
  margin: auto;
  top: 11px;
  left: 0px;
}

dl.list dd > *:first-of-type {
  margin-top: 0;
}

small {
  font-size: 80%;
}

strong.large {
  font-size: 150%;
}

strong.marker {
  background: #f1fc40;
}

.wrap {
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
          flex-direction: column;
}

.wrap .inner {
  -webkit-box-flex: 1;
          flex: 1;
  margin-bottom: 30px;
}

.wrap-3col {
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
          flex-direction: column;
}

.wrap-3col .inner {
  -webkit-box-flex: 1;
          flex: 1;
  margin-bottom: 30px;
}

h1 {
  font-family: "Noto Sans JP", sans-serif;
}

h2 {
  font-family:  "Noto Serif JP", serif;
  font-weight:400;
  color:#257406;
  text-align: center;
  letter-spacing:20%;
  font-size: 40px;
}

h2:after {
  content: '';
  display: block;
  width: 100%;
  height: 1px;
  background: #257406;
  margin: 10px auto 40px;
}

h3 {
  font-family: "Noto Serif JP", serif;
  font-weight:500;
  border-bottom: 1px solid #000;
  padding: 0px 15px;
  margin: 2em 0 1em;
  text-align: center;
}

h4 {
  font-family: "Noto Serif JP", serif;
  font-weight:500;
  margin: 2em 0 0em;
  line-height: 150%;
  margin:0 0 40px 0;
}

h5 {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 18px;
  margin: 10px auto 5px;
}

.center {
  text-align: center;
}

blockquote {
  background: #f5f4f4;
  margin: 2em 0;
  padding: 15px;
  border-left: 3px solid #ada5a5;
}

blockquote > *:first-of-type {
  margin-top: 0;
}

blockquote > *:last-of-type {
  margin-bottom: 0;
}

.event th.eventsubtitle {
white-space: nowrap;
text-align: right;
}

.event th,.event td {
vertical-align: top;
padding:20px 0;
}

.comment,.commentspace {
  font-size: 15px;
}
.commentspace {
  border-top: solid 1px #666;
  margin-top:15px;
  padding:15px 0 0 20px;;
}

table.center {
  margin: 20px auto;
}

.box {
  background: #f1fc40;
  margin: 2em 0;
  padding: 15px;
}

.box > *:first-of-type {
  margin-top: 0;
}

.box > *:last-of-type {
  margin-bottom: 0;
}

a {
  color: #479c25;;
  text-decoration: none;
  -webkit-transition: color .3s;
  transition: color .3s;
}

a:focus, a:visited, a:active {
  color: ##479c25;;
}

a:hover {
  color: #409c10;
}
.br-sp {
    display: none;
}
.br-pc {
    display: block;
}
ul ul {
  margin-left: 1em;
  margin-bottom: 10px;
}

a.btn {
  display: block;
  background: #9ed200;
  color: black;
  padding: 10px 30px;
  text-align: center;
  min-width: 250px;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin: 20px auto;
  -webkit-transition: .3s;
  transition: .3s;
}

a.btn:hover {
  background: #f1fc40;
}

p {
  margin: 1.5em 0;
}

dl.news {
  font-size: 18px;
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
          flex-direction: column;
  border-bottom: 1px dotted #b8b8b8;
  padding: 15px 0;
}

dl.news dt {
  font-weight: 400;
  padding: 0;
  line-height: 1.2;
  width: 150px;
}

dl.news dd {
  padding: 15px 0 20px 0;
  margin: 0;
  color:#479c25;
}


/*     矢印　　　　*/

.arrow{
	position: relative;
	display: inline-block;
	padding: 0 0 0 0;
	color: #000;
	vertical-align: middle;
	text-decoration: none;
	font-size: 15px;
}
.arrow::before,
.arrow::after{
	position: absolute;
	top: 0;
	bottom: 3px;
	left: 5px;
	margin: auto;
	content: "";
	vertical-align: middle;
}
.curcle::before{
	box-sizing: border-box;
	width: 15px;
	height: 15px;
	border: 1px solid #fff;
	-webkit-border-radius: 50%;
	border-radius: 50%;
}
.curcle::after{
  left: 9px;
	width: 5px;
	height: 5px;
	border-top: 1px solid #fff;
	border-right: 1px solid #fff;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}
.curcleg::before{
	box-sizing: border-box;
	width: 15px;
	height: 15px;
	border: 1px solid #479c25;
	-webkit-border-radius: 50%;
	border-radius: 50%;
}
.curcleg::after{
  left: 9px;
	width: 5px;
	height: 5px;
	border-top: 1px solid #479c25;
	border-right: 1px solid #479c25;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}

/*　　　　　　グローバルメニュー　　　　　*/


nav#globalnav {
  z-index: 9;
  position: fixed;
  width: 100%;
  top: 0;

}
nav#globalnav h1 img {
  width: 350px;
  margin: 0;
  padding:0;
}
nav#globalnav .container {
  width: 100%;
  margin-top:20px;
}
nav#globalnav ul,nav#globalnav .container {
  display: flex;
}
nav#globalnav #globalnav_bg {
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  z-index: -1;
  background-color: #4bb322;
}

.colorchange {
opacity: 0;
}
.colorchange2 {
opacity: 1;
}
nav#globalnav .colorchange[data-js-scroll="true"] {
  opacity: 1;
  transition: .3s;
}
nav#globalnav nav {
  margin-top: 10px;
  margin-left: auto;
}

nav#globalnav ul#navmenu {
  *zoom: 1;
  list-style: none;
  margin:0 auto 0 0;
  padding: 0;
}

nav#globalnav ul#navmenu li {
  position: relative;
}
nav#globalnav ul#navmenu li a {
  display: block;
  padding: 0 15px;
  font-size: 17px;
  color: #ffffff;
}
nav#globalnav ul#navmenu li ul{
  list-style: none;
  position: absolute;
  z-index: 9999;
  top: 100%;
  left: 0;
  margin: 7px 0 0 0;
  padding: 0;
  display: block;
  background-color: rgba(68, 150, 35, 1);
  border-radius: 5px;
}

nav#globalnav ul#navmenu li ul li{
  width: max-content;
  overflow: hidden;
  height: 0;
  transition: .2s;
}
nav#globalnav ul#navmenu li:hover ul li{
  overflow: visible;
  height: 47px;
}
nav#globalnav ul#navmenu ul li a{
  font-size:14px;
  padding: 15px 15px;
  text-align: left;
  opacity: 1;
}
.rl {
  border-right:solid 1px #fff;
}
#navmenu .bl {
  margin-bottom: 20px;
  border-bottom:solid 1px rgba(255, 255, 255, 0.3);
}
.tl {
  border-top:solid 1px rgba(255, 255, 255, 0.3);
}
nav#globalnav ul#navmenu li a:hover {
  color: #9ed200;
}


.spmenu{
  display: none;
}
.pcmenu{
  display: block;
}

 /*ハンバーガーメニュー*/
@media only screen and (max-width: 1060px) {
  .spmenu{
    display: block;
  }
  .pcmenu{
    display: none;
  }
   nav#globalnav .container {
     padding:0px;
     margin-top:10px;
   }
   nav#globalnav h1 img {
     width: 260px;
   }
   .nav {
     position: fixed;
     right: -320px; /* 右から出てくる */
     top: -10px;
     width: 300px; /* スマホに収まるサイズ */
     height: 100vh;
     padding-top: 60px;
     background-color: #3f9d1a;
     transition: all .6s;
     z-index: 200;
     overflow-y: auto; /* メニューが多くなったらスクロールできるように */
   }
   .hamburger {
     position: absolute;
     right: 0px;
     top: 8px;
     width: 60px; /* クリックしやすい幅 */
     height: 60px; /* クリックしやすい高さ */
     cursor: pointer;
     z-index: 300;
   }
   .navmenu {
     margin: 0;
     padding: 0;
     list-style: none;
   }
   .nav_item {
     text-align: center;
     padding: 0 14px;
   }
   nav#globalnav ul,nav#globalnav .container {
     display: block;
   }
   nav#globalnav ul#navmenu li a {
     display: grid;
     padding: 15px 30px;
     font-size: 17px;
     border-top:solid 1px rgba(255, 255, 255, 0.3);
   }
nav#globalnav ul#navmenu li ul{
     position: relative;
     z-index: 9999;
     top: 100%;
     left: 0;
     margin: 0;
     padding: 0;
     display: block;
     border-radius: 0px;
     background-color: rgba(59, 137, 27, 1);
   }
nav#globalnav ul#navmenu li ul li{
     width: 100%;
     padding:0 0 0 0;
     margin: 0;
   }
  nav#globalnav ul#navmenu li:hover ul li{
     overflow: visible;
     height: 55px;
   }
    nav#globalnav ul#navmenu li ul li a{
     border-top:solid 1px rgba(255, 255, 255, 0.3);
    font-size: 17px;
    padding:15px 0 0 30px;
   }
   nav#globalnav ul#navmenu .memo{
     font-size:14px;
     padding:5px 25px 5px 5px;
     border: solid 1px rgba(255, 255, 255, 0.5);
     border-radius: 5px;
     color:#fff;
     margin: 40px 0 0 30px;
   }
   .nav_item a:hover {
     background-color: #eee;
   }
   .hamburger_border {
     position: absolute;
     left: 11px;
     width: 20px;
     height: 2px;
     background-color: #fff;
     transition: all .6s;
   }
   .hamburger_border_top {
     top: 14px;
   }
   .hamburger_border_center {
     top: 22px;
   }
   .hamburger_border_bottom {
     top: 30px;
   }
   .black_bg {
     position: fixed;
     left: 0;
     top: 0;
     width: 100vw;
     height: 100vh;
     z-index: 100;
     background-color: #333;
     opacity: 0;
     visibility: hidden;
     transition: all .6s;
     cursor: pointer;
   }

   /* 表示された時用のCSS */
   .nav-open .nav {
     right: 0;
   }
   .nav-open .black_bg {
     opacity: .8;
     visibility: visible;
   }
   .nav-open .hamburger_border_top {
     transform: rotate(45deg);
     top: 20px;
   }
   .nav-open .hamburger_border_center {
     width: 0;
     left: 50%;
   }
   .nav-open .hamburger_border_bottom {
     transform: rotate(-45deg);
     top: 20px;
   }

 }

/* sp　基本 */
 @media only screen and (max-width: 768px) {

   .br-sp {
        display: block;
    }
    .br-pc {
         display: none;
     }
     .spd {
           visibility:hidden;
      }

   nav#globalnav .container {
     padding:0 20px;
   }
   h2 {
     letter-spacing:10%;
     font-size: 30px;
     line-height: 150%;
   }
   h2:after {
     margin: 30px 0 40px 0;
   }
   .essay h3 {
     font-size: 24px;
   }
   .event h3 {
     font-size: 26px;
     line-height: 130%;
     margin-top: 25px;
     padding-bottom: 20px;
   }
   .essay h4 {
     font-size: 22px;
   }
   .about h4 {
     font-size: 20px;
     text-align: left;
   }
   .event table {
     width:100%;
   }
   .event td,.event th {
   display: block;
   text-align: center;
   }
   .event .comment {
     margin-top: 10px;
   text-align: left;
   }
   .event th {
     background: #eee;
   padding:5px 0;
   }
   .event td {
   padding:10px 0 20px 0;
   }
   .event th.eventsubtitle {
   text-align: center;
   }
 }

.mainvisual{
  margin-top:40%;
}
.mainvisual::before {
  background-image: url('../img/top.jpg');
  background-position: bottom 10px;
  background-repeat: no-repeat;
  background-size:100%;
  background-color: #f5f2f2;
  content: "";
  height: 100vh;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: -1;
}

/* sp メインビジュアル */
 @media only screen and (max-width: 1060px) {
   .mainvisual{
     margin-top:70%;
   }
   .mainvisual::before {
     background-image: url('../img/top.jpg');
     background-position: top ;
     background-repeat: no-repeat;
     background-size:140%;
     background-color: #f5f2f2;
     content: "";
     height: 100%;
     left: 0;
     position: fixed;
     top: 0;
     z-index: -1;
   }
 }

main.subpage,main.event,main.about {
  margin-top: 60px;
}

input[type=checkbox]#menubtncheck {
  display: none;
}

input[type=checkbox]#menubtncheck:checked + nav#globalnav {
  opacity: 1;
  z-index: 9;
}

p#menubtn {
  display: block;
  width: 100px;
  height: 100px;
  text-align: center;
  font-size: 20px;
  position: fixed;
  color: #000000;
  top: 10px;
  right: 20px;
  -webkit-transition: color 0.4s;
  transition: color 0.4s;
  z-index: 9;
}

p#menubtn:hover {
  cursor: pointer;
}

p#menubtn#inmenu {
  color: #ffffff;
}

p#menubtn#inmenu-back {
  opacity: 0;
  width: 100vw;
  height: 100vh;
  top: 0;
  right: 0;
  z-index: -1;
}

ul.illust {
  display: -webkit-box;
  display: flex;
  flex-wrap: wrap;
  margin: 30px auto;
  list-style: none;
}

ul.illust li {
  position: relative;
  height: 120px;
  width: calc(100% / 3 - 5px);
  margin-bottom: 5px;
  padding: 0;
}

ul.illust li:before {
  display: none;
}

ul.illust li:not(:nth-of-type(3n)) {
  margin-right: 5px;
}

0ul.illust li a {
  display: block;
  width: 100%;
  height: 100%;
  -webkit-transition: .3s;
  transition: .3s;
}

ul.illust li a:hover {
  opacity: .7;
}

ul.illust li a img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.card-wrapper {
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
          flex-direction: column;
}

.card-wrapper .card {
  text-align: center;
}

.card-wrapper .card p {
  font-size: 15px;
  max-width: 300px;
  margin: auto;
  text-align: left;
}

.card-wrapper img.prof {
  width: 200px;
  height: 200px;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 50%;
  margin: 20px auto 10px;
}

ul.sns {
  list-style: none;
  display: -webkit-box;
  display: flex;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin: 20px auto;
}

ul.sns li a {
  display: block;
  font-size: 20px;
  padding: 5px;
  margin: 0 3px;
}


/*    フッター　　　　*/


footer {
  background: #444;
  color: #ffffff;
  padding: 30px 0px;
}

.footerarea img {
  width: 300px;
  margin: 0;
  padding:0;
}
footer .memo {
  margin: 0 ;
  margin-left: 10px;
  font-size: 14px;
  border:solid 1px #aaa;
  padding:5px 25px 5px 5px;
  border-radius: 5px;
}

footer .memo a {
  color: #fff;
}

.footerarea {
  list-style: none;
  display: flex;
  align-items: center
}
footer ul.footmenu {
  list-style: none;
  display: inline-flex;
  align-items: center
}
footer .footmenu{
  margin:0 0 0 auto;
}

footer ul.footmenu li a{
  font-size: 14px;
  white-space: nowrap;
  padding: 0px 15px;
  color: #fff;
}

footer ul.footmenu li a:hover {
  color: #f1fc40;
}

footer ul.footmenu ul {
  list-style: none;
}

footer p#copyright {
  margin:20px 0 0 0;
  padding:5px 0 0 0;
  font-size: 12px;
  opacity: .8;
  text-align: center;
  border-top: 1px solid #aaa;
}

footer p#copyright a:hover {
  color: #f1fc40;
}

@media only screen and (max-width: 1060px) {
  footer {
    background: #444;
    color: #ffffff;
    padding: 5px 0;
    margin:0;
  }
  .footerarea {
    display:none;
  }
  footer p#copyright {
    margin:10px 0;
    padding:0;
    font-size: 12px;
    border-top: 0px;
  }
}


form.mailform {
  text-align: center;
  max-width: 800px;
  margin: 30px auto;
}

form.mailform textarea {
  margin: 0 0 15px;
  font-size: 14px;
  line-height: 1.6em;
  border: none;
  padding: 10px;
  width: 100%;
  height: 200px;
  border-radius: 5px;
  vertical-align: bottom;
  border: 1px solid #e5e4e4;
  background: #fcfcfc;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  font-family: "Josefin Sans", "Kosugi", cursive;
}

form.mailform textarea:focus {
  outline: none;
  background: #ffffff;
}

form.mailform input {
  margin: 0 0 15px;
  font-size: 16px;
  border: none;
  padding: 10px;
  width: 100%;
  border-radius: 5px;
  border: 1px solid #e5e4e4;
  background: #fcfcfc;
  -webkit-transition: background 0.3s;
  transition: background 0.3s;
  font-family: "Josefin Sans", "Kosugi", cursive;
}

form.mailform input:focus {
  outline: none;
  background: #ffffff;
}

form.mailform input[type="submit"] {
  width: 100%;
  max-width: 200px;
  margin: 20px auto 20px;
  padding: 15px 20px;
  background: #9ed200;
  border: none;
}

form.mailform input[type="submit"]:focus, form.mailform input[type="submit"]:hover {
  background: #f1fc40;
  cursor: pointer;
}

a#totop {
  display: block;
  position: fixed;
  z-index: 5;
  bottom: 5px;
  right: 5px;
  width: 60px;
  height: 60px;
  background: #9ed200;
  border-radius: 7px;
}

a#totop:before {
  content: '';
  display: block;
  width: 10px;
  height: 10px;
  border-top: 2px solid #FFF;
  border-right: 2px solid #FFF;
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
  margin: auto;
  position: absolute;
  right: 0;
  left: 0;
  top: 0;
  bottom: 0;
  -webkit-transition: .3s;
  transition: .3s;
}

a#totop:hover:before {
  -webkit-transform: translateY(-3px) rotate(-45deg);
          transform: translateY(-3px) rotate(-45deg);
}




/*SP用メインイメージ*/
@media only screen and (min-width: 1060px) {
  .wrap {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
            flex-direction: row;
    -webkit-box-pack: justify;
            justify-content: space-between;
  }
  .wrap .inner {
    width: 46%;
    -webkit-box-flex: 0;
            flex: none;
  }
  .wrap-3col,.wrap-1pic,.wrap-2pic,.wrap-3pic {
    display: flex;
    justify-content: space-between;

  }
  .wrap-1pic img {
    width: 100%;
  }
  .wrap-2pic img {
    width: 49%;
  }
  .wrap-3pic img {
    width: 32%;
  }
  .wrap-3col .inner {
    width: 31%;
    -webkit-box-flex: 0;
            flex: none;
  }
  section {
    padding: 80px 0;
  }

  h3 {
    font-size: 26px;
  }
  h4 {
    font-size: 20px;
  }
  dl.news {
    max-width: 700px;
    margin: auto;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
            flex-direction: row;
  }
  dl.news dd, dl.news dt {
    padding: 10px;
    line-height: 1.6;
  }
  p#menubtn {
    display: none;
  }


  ul.illust li {
    position: relative;
    height: 200px;
    width: calc(100% / 4 - 4px);
    margin-bottom: 5px;
    padding: 0;
  }
  ul.illust li:not(:nth-of-type(3n)) {
    margin-right: 0;
  }
  ul.illust li:not(:nth-of-type(4n)) {
    margin-right: 5px;
  }
  .card-wrapper {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
            flex-direction: row;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
            justify-content: space-between;
  }
  .card-wrapper .card {
    width: 43%;
    margin-bottom: 30px;
  }
}






/*   エッセイ   */

.subpage .essay .subtitle,.essay h3,.essay h4{
  border: 0px;
  padding:0;
  margin: 0;
  display: block;
  text-align: center;
}
.essay h3,.essay h4{
  line-height: 100%;
  margin-bottom: 5px;
}
.essay h4{
  margin-top: 20px;
}

/*   ページング　　　*/

.pagination-3 {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0 8px;
    list-style-type: none;
    padding:20px 0 0 0;
}

.pagination-3 a {
    box-sizing: border-box;
    justify-content: center;
    align-items: center;
    width: 2em;
    height: 2em;
    color: #333;
    text-decoration: none;
}

.pagination-3 .current {
    pointer-events: none;
    padding:0 30px;
}

.pagination-3 .prev,
.pagination-3 .next, {
    padding: .5em 5px;
    line-height: 1;
}

.pagination-3 .prev::before,
.pagination-3 .next::after {
    display: inline-block;
    transform: rotate(45deg);
    width: .3em;
    height: .3em;
    content: '';
    margin: 0 5px 3px 5px;
}

.pagination-3 .prev::before {
    border-bottom: 1px solid #333;
    border-left: 1px solid #333;
}

.pagination-3 .next::after {
    border-top: 1px solid #333;
    border-right: 1px solid #333;
}

.pagination-3 #end {
    opacity: 0.3;
}