@charset "UTF-8";
@import url("global.css");
/* ------------------------------
 Index-Page
------------------------------ */
#pagetitle:has(#journal) {
  padding-top: 120px;
  height: auto;
  text-align: center;
}
#pagetitle:has(#journal) #journal {
  width: 360px;
  margin-inline: auto;
  margin-bottom: 10px;
}
#pagetitle:has(#journal) #title .ja {
  font-size: 16px;
  color: #639A70;
}
#pagetitle:has(#journal) + #breadcrumbs {
  margin-bottom: 50px;
}

/* ---------- Category-Link ---------- */
#catlink {
  background: linear-gradient(to right, #8E8E8E 4px, transparent 3px) repeat-x left top/7px 1px, linear-gradient(to right, #8E8E8E 4px, transparent 3px) repeat-x left bottom/7px 1px;
  padding-block: 35px;
  padding-inline: min(20px,1vw);
  margin-bottom: 80px;
}
#catlink .catlist .h {
  display: flex;
  gap: 8px;
  align-items: center;
  line-height: 1;
  margin-bottom: 8px;
  font-size: 14px;
  font-family: "Manrope", "Zen Kaku Gothic New", sans-serif;
}
#catlink .catlist .h::before {
  content: "\f02b";
  font-family: 'Font Awesome 6 free','Font Awesome 6 Brands';
  font-weight: 900;
  color: #639A70;
  font-size: 18px;
}
#catlink .catlist ul {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 8px;
  margin-left: -5px;
}
#catlink .catlist ul li {
  display: flex;
  align-items: center;
  gap: 8px;
}
#catlink .catlist ul li::after {
  content: "";
  width: 1px;
  height: 15px;
  background-color: #8E8E8E;
  display: block;
  rotate: 35deg;
}
#catlink .catlist ul li:last-of-type::after {
  display: none;
}
#catlink .catlist ul li a {
  display: block;
  color: #639A70;
  padding: 0 5px;
  font-size: 14px;
  background-image: linear-gradient(rgba(99, 154, 112, 0.2), rgba(99, 154, 112, 0.2));
  background-repeat: no-repeat;
  background-position: bottom right;
  background-size: 0 3px;
  transition: background-size 0.5s cubic-bezier(0.04, 0.435, 0.315, 0.9);
}
#catlink .catlist ul li a::before {
  content: "#";
  padding-right: 2px;
}
@media (any-hover: hover) {
  #catlink .catlist ul li a:hover {
    background-position: bottom left;
    background-size: 100% 3px;
  }
}

/* ---------- Category-Title ---------- */
#cattitle {
  margin-block: -10px 50px;
}
#cattitle .cattitle {
  font-size: 16px;
}
#cattitle .cattitle strong {
  display: inline-block;
  margin-right: 8px;
  font-size: 1.8em;
  color: #639A70;
}

/* ---------- archive-bloglist ---------- */
ul.bloglist {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: min(26px,2vw);
  margin-bottom: 80px;
}
ul.bloglist li {
  display: contents;
}
ul.bloglist li a {
  display: grid;
  gap: 0;
  grid-template-rows: subgrid;
  grid-row: span 4;
  height: 100%;
  line-height: 1.5;
  overflow: hidden;
  margin-bottom: 60px;
}
@media (any-hover: hover) {
  ul.bloglist li a:hover .image img {
    filter: brightness(1.5);
  }
  ul.bloglist li a:hover .image::before {
    opacity: .7;
  }
  ul.bloglist li a:hover .image::after {
    opacity: 1;
    translate: 0;
  }
}
ul.bloglist li a .image {
  aspect-ratio: 3 / 2;
  position: relative;
  margin-bottom: 20px;
}
ul.bloglist li a .image img {
  transition: all 0.5s cubic-bezier(0.04, 0.435, 0.315, 0.9) 0s;
  backface-visibility: hidden;
  border-radius: var(--radius);
}
ul.bloglist li a .image::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background-color: #639A70;
  border-radius: var(--radius);
  transition: all 0.5s cubic-bezier(0.04, 0.435, 0.315, 0.9) 0s;
  backface-visibility: hidden;
  opacity: 0;
}
ul.bloglist li a .image::after {
  content: "この記事を読む";
  color: #fff;
  position: absolute;
  inset: 0;
  text-align: center;
  align-content: center;
  transition: all 0.5s cubic-bezier(0.04, 0.435, 0.315, 0.9) 0s;
  backface-visibility: hidden;
  z-index: 2;
  opacity: 0;
  translate: 0 10px;
}
ul.bloglist li a .entrytitle {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 15px;
}
ul.bloglist li a .sub {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
}
ul.bloglist li a .sub .date {
  color: #8E8E8E;
  font-family: "Manrope", "Zen Kaku Gothic New", sans-serif;
}
ul.bloglist li a .sub .author {
  display: flex;
  align-items: center;
  gap: 10px;
}
ul.bloglist li a .sub .author span {
  display: block;
  width: 38px;
  height: 38px;
}
ul.bloglist li a .sub .author span img {
  border-radius: 50%;
  overflow: hidden;
}
ul.bloglist li a .cat {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  margin-top: 5px;
}
ul.bloglist li a .cat span {
  display: block;
  font-size: 11px;
}
ul.bloglist li a .cat span::before {
  content: "#";
  padding-right: 2px;
}

/* ---------- Old-Blog-Link ---------- */
.oldblog {
  margin-top: 70px;
}
.oldblog a {
  width: fit-content;
  margin-left: auto;
  display: flex;
  gap: 15px;
  align-items: center;
  height: 60px;
  padding-inline: 25px;
  border-radius: 99px;
  background-color: #639A70;
  color: #FFF;
}
.oldblog a::after {
  content: "\f08e";
  font-family: 'Font Awesome 6 free','Font Awesome 6 Brands';
  font-weight: 900;
  line-height: 1;
  font-size: 90%;
  margin-left: auto;
  transition: all 0.5s cubic-bezier(0.04, 0.435, 0.315, 0.9) 0s;
  backface-visibility: hidden;
}
@media (any-hover: hover) {
  .oldblog a:hover::after {
    translate: 10px 0;
  }
}

/* ------------------------------
 Post-Page
------------------------------ */
.single #breadcrumbs {
  padding-top: 120px;
}

.post .posttitle {
  margin-bottom: 80px;
  display: flex;
  column-gap: 30px;
  justify-content: space-between;
  background: url("../img/bgmesh.png") repeat left top/1400px auto;
  border-radius: var(--radius-s);
  padding: 60px 35px;
}
.post .posttitle .postdata {
  display: flex;
  column-gap: 15px;
  padding-top: 15px;
}
.post .posttitle .postdata .date {
  display: block;
  color: #8E8E8E;
  padding-top: 1px;
  white-space: nowrap;
  font-size: 90%;
  font-family: "Manrope", "Zen Kaku Gothic New", sans-serif;
}
.post .posttitle .postdata ul.cat {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.post .posttitle .postdata ul.cat li a {
  display: block;
  padding: 1px 15px;
  border-radius: 99px;
  font-size: .8em;
  letter-spacing: 0;
  white-space: nowrap;
  color: #FFF;
  background-color: #639A70;
}
.post .posttitle .title {
  line-height: 1.6;
  font-size: clamp(17px, 3.5vw, 28px);
}
.post .posttitle .author a {
  display: flex;
  align-items: center;
  gap: 15px;
}
.post .posttitle .author span {
  display: block;
}
.post .posttitle .author .name {
  font-size: .9em;
  white-space: nowrap;
}
.post .posttitle .author .photo {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  overflow: hidden;
}
.post #postbody {
  margin-bottom: 100px;
}
.post #postbody h1, .post #postbody h2, .post #postbody h3, .post #postbody h4, .post #postbody h5, .post #postbody h6 {
  position: relative;
}

#author {
  margin-top: 100px;
  border: #f6f6f6 solid 4px;
  border-radius: 4px;
  padding: min(50px,4vw);
  display: flex;
  align-items: flex-start;
  gap: min(40px,3vw);
  position: relative;
}
#author .h {
  position: absolute;
  top: 0;
  left: min(50px,4vw);
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  width: fit-content;
  padding-inline: 15px;
  background-color: #FFF;
}
#author .h span {
  display: block;
  line-height: 1.2;
}
#author .h .en {
  color: #639A70;
  font-size: 14px;
}
#author .h .ja {
  font-size: clamp(20px, 3.2vw, 28px);
}
#author .author {
  flex-shrink: 0;
  width: 280px;
}
#author .author .prof {
  display: flex;
  align-items: center;
  gap: 30px;
}
#author .author .prof .photo {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  overflow: hidden;
}
#author .author .prof .name .job {
  font-size: .75em;
  display: block;
}
#author .author .prof .name strong {
  display: block;
  letter-spacing: .1em;
}
#author .author .link {
  margin-top: 25px;
}
#author .author .link a.linkbutton {
  width: auto;
  max-width: 200px;
  font-size: .85em;
}
#author ul.post {
  display: flex;
  gap: min(30px,2vw);
}
#author ul.post li {
  flex: 1;
}
#author ul.post li a {
  display: flex;
  flex-direction: column;
  height: 100%;
}
@media (any-hover: hover) {
  #author ul.post li a:hover .image img {
    filter: brightness(1.5);
  }
  #author ul.post li a:hover .image::before {
    opacity: .7;
  }
  #author ul.post li a:hover .image::after {
    opacity: 1;
    translate: 0;
  }
}
#author ul.post li a .image {
  aspect-ratio: 3 / 2;
  position: relative;
  margin-bottom: 10px;
}
#author ul.post li a .image img {
  transition: all 0.5s cubic-bezier(0.04, 0.435, 0.315, 0.9) 0s;
  backface-visibility: hidden;
  border-radius: var(--radius);
}
#author ul.post li a .image::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background-color: #639A70;
  border-radius: var(--radius);
  transition: all 0.5s cubic-bezier(0.04, 0.435, 0.315, 0.9) 0s;
  backface-visibility: hidden;
  opacity: 0;
}
#author ul.post li a .image::after {
  content: "この記事を読む";
  color: #fff;
  position: absolute;
  inset: 0;
  text-align: center;
  align-content: center;
  transition: all 0.5s cubic-bezier(0.04, 0.435, 0.315, 0.9) 0s;
  backface-visibility: hidden;
  z-index: 2;
  opacity: 0;
  translate: 0 10px;
}
#author ul.post li a .title {
  line-height: 1.5;
  padding-inline: 5px;
  margin-bottom: 5px;
  font-size: 14px;
}
#author ul.post li a .postdata {
  display: flex;
  padding-inline: 5px;
  column-gap: 7px;
  margin-top: auto;
}
#author ul.post li a .postdata .date {
  font-size: 12px;
  color: #8E8E8E;
}
#author ul.post li a .postdata .cat {
  font-size: 12px;
  letter-spacing: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 3px;
}
#author ul.post li a .postdata .cat span {
  display: block;
}
#author ul.post li a .postdata .cat span::before {
  content: "#";
  margin-right: 2px;
}

.pagenavi {
  margin-top: 80px;
}
.pagenavi ul li a {
  gap: 15px;
  height: 60px;
}
.pagenavi ul li.right a {
  justify-content: flex-start;
  flex-direction: row-reverse;
}

/* ---------- Archive-Link ---------- */
.selectarea {
  margin-top: 60px;
  background-color: #F1F0E7;
  width: 100%;
  text-align: center;
  box-sizing: border-box;
  justify-content: center;
  display: flex;
  align-items: center;
}
.selectarea dl {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 40px;
  box-sizing: border-box;
  border-right: #FFF 4px solid;
}
.selectarea dl:last-of-type {
  border: none;
}
.selectarea dl dt {
  line-height: 1;
  font-family: "Manrope", "Zen Kaku Gothic New", sans-serif;
}
.selectarea dl dd {
  padding: 25px 0 25px 15px;
  position: relative;
}
.selectarea dl dd::after {
  content: "\f078";
  font-family: 'Font Awesome 6 free','Font Awesome 6 Brands';
  font-weight: 900;
  position: absolute;
  right: 10px;
  top: 50%;
  pointer-events: none;
  transform: translateY(-50%);
  font-size: 85%;
  color: #8E8E8E;
}
.selectarea dl dd form select {
  font-family: "Zen Kaku Gothic New", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "游ゴシック Medium", "Yu Gothic Medium", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro", "Meiryo", "メイリオ", Helvetica, sans-serif;
  border: none;
  border-radius: 2px;
  padding: 12px 30px 12px 12px;
  background-color: #FFF;
  width: 100%;
  box-sizing: border-box;
  vertical-align: middle;
  box-shadow: none;
  letter-spacing: 1px;
  -webkit-appearance: none;
  appearance: none;
}

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

 Responsive-Breakpoint ( 1300px )
 
------------------------------------------------------------------------------------------------------------------------ */
@media only screen and (max-width: 1300px) {
  /* ------------------------------
   Index-Page
  ------------------------------ */
  #pagetitle:has(#journal) {
    margin-bottom: 35px;
  }

  /* ---------- Category-Link ---------- */
  /* ---------- Category-Title ---------- */
  #cattitle {
    margin-block: -35px 30px;
  }

  /* ---------- archive-bloglist ---------- */
  ul.bloglist {
    grid-template-columns: repeat(3, 1fr);
  }
}
/* ------------------------------------------------------------------------------------------------------------------------

 Responsive-Breakpoint-2 ( 959px )
 
------------------------------------------------------------------------------------------------------------------------ */
@media only screen and (max-width: 959px) {
  /* ------------------------------
   Index-Page
  ------------------------------ */
  #pagetitle:has(#journal) {
    padding-top: 100px;
  }
  #pagetitle:has(#journal) #journal {
    width: 260px;
  }
  #pagetitle:has(#journal) #title .ja {
    font-size: 14px;
  }
  #pagetitle:has(#journal) + #breadcrumbs {
    margin-bottom: 45px;
  }

  /* ---------- Category-Link ---------- */
  #catlink {
    padding-block: 30px;
    margin-bottom: 60px;
  }

  /* ---------- Category-Title ---------- */
  #cattitle {
    margin-block: -25px 50px;
  }
  #cattitle .cattitle {
    font-size: 15px;
  }
  #cattitle .cattitle strong {
    font-size: 1.6em;
  }

  /* ---------- archive-bloglist ---------- */
  ul.bloglist {
    grid-template-columns: repeat(2, 1fr);
    column-gap: 5vw;
  }
  ul.bloglist li a {
    margin-bottom: 40px;
  }
  ul.bloglist li a .image {
    margin-bottom: 10px;
  }
  ul.bloglist li a .entrytitle {
    margin-bottom: 5px;
  }

  /* ---------- Old-Blog-Link ---------- */
  .oldblog {
    margin-top: 60px;
  }
  .oldblog a {
    height: 56px;
  }

  /* ------------------------------
   Post-Page
  ------------------------------ */
  .single #breadcrumbs {
    padding-top: 140px;
  }

  .post .posttitle {
    margin-bottom: 50px;
    padding: 45px 30px;
  }
  .post .posttitle .postdata ul.cat li a {
    padding: 0 12px;
  }
  .post .posttitle .author .photo {
    width: 50px;
    height: 50px;
  }
  .post #postbody {
    margin-bottom: 65px;
  }

  #author {
    margin-top: 65px;
    display: block;
  }
  #author .h {
    padding-inline: 12px;
  }
  #author .h .en {
    font-size: 13px;
  }
  #author .author {
    width: fit-content;
    margin-inline: auto;
    margin-bottom: 35px;
  }
  #author .author .prof {
    justify-content: center;
    gap: 30px 20px;
  }
  #author .author .prof .photo {
    width: 100px;
    height: 100px;
  }
  #author .author .link {
    margin-top: 20px;
  }
  #author ul.post li a .postdata .date {
    font-size: 11px;
  }
  #author ul.post li a .postdata .cat {
    font-size: 11px;
    gap: 6px 3px;
  }

  .pagenavi {
    margin-top: 65px;
  }

  /* ---------- Archive-Link ---------- */
  .selectarea dl {
    padding: 0 30px;
  }
}
/* ------------------------------------------------------------------------------------------------------------------------

 Responsive-Breakpoint-3 ( 644px )
 
------------------------------------------------------------------------------------------------------------------------ */
@media only screen and (max-width: 644px) {
  /* ------------------------------
   Index-Page
  ------------------------------ */
  #pagetitle:has(#journal) {
    padding-top: 140px;
    margin-bottom: 25px;
  }
  #pagetitle:has(#journal) #journal {
    width: 70%;
    margin-bottom: 5px;
  }
  #pagetitle:has(#journal) #title .ja {
    font-size: 12px;
  }
  #pagetitle:has(#journal) + #breadcrumbs {
    margin-bottom: 30px;
  }

  /* ---------- Category-Link ---------- */
  #catlink {
    padding-block: 20px;
    margin-bottom: 40px;
  }
  #catlink .catlist .h {
    gap: 6px;
    margin-bottom: 6px;
    font-size: 12px;
  }
  #catlink .catlist .h::before {
    font-size: 15px;
  }
  #catlink .catlist ul {
    gap: 0 7px;
    margin-left: -3px;
  }
  #catlink .catlist ul li {
    gap: 6px;
  }
  #catlink .catlist ul li::after {
    height: 12px;
  }
  #catlink .catlist ul li a {
    padding: 0 4px;
    font-size: 12px;
  }
  #catlink .catlist ul li a::before {
    padding-right: 1px;
  }

  /* ---------- Category-Title ---------- */
  #cattitle {
    margin-block: -10px 25px;
  }
  #cattitle .cattitle {
    font-size: 14px;
  }
  #cattitle .cattitle strong {
    margin-right: 4px;
    font-size: 1.5em;
  }

  /* ---------- archive-bloglist ---------- */
  ul.bloglist {
    margin-bottom: 45px;
  }
  ul.bloglist li a {
    margin-bottom: 35px;
  }
  ul.bloglist li a .entrytitle {
    font-size: 12px;
    margin-bottom: 0;
  }
  ul.bloglist li a .sub {
    font-size: 10px;
  }
  ul.bloglist li a .sub .author {
    gap: 5px;
  }
  ul.bloglist li a .sub .author span {
    width: 24px;
    height: 24px;
  }
  ul.bloglist li a .cat {
    gap: 1px 5px;
    margin-top: 3px;
  }
  ul.bloglist li a .cat span {
    font-size: 9px;
  }
  ul.bloglist li a .cat span::before {
    padding-right: 1px;
  }

  /* ---------- Old-Blog-Link ---------- */
  .oldblog {
    margin-top: 45px;
  }
  .oldblog a {
    margin-inline: auto;
    height: 46px;
    padding-inline: 20px;
  }
  .oldblog a::after {
    font-size: 85%;
  }

  /* ------------------------------
   Post-Page
  ------------------------------ */
  .single #breadcrumbs {
    padding-top: 120px;
  }

  .post .posttitle {
    margin-bottom: 35px;
    display: block;
    padding: 30px 5vw;
  }
  .post .posttitle .postdata {
    column-gap: 10px;
  }
  .post .posttitle .postdata .date {
    padding-top: 0;
  }
  .post .posttitle .postdata ul.cat li a {
    padding: 0 10px;
  }
  .post .posttitle .author {
    width: fit-content;
    margin-left: auto;
  }
  .post .posttitle .author a {
    gap: 8px;
  }
  .post .posttitle .author .photo {
    width: 40px;
    height: 40px;
  }
  .post #postbody {
    margin-bottom: 50px;
  }

  #author {
    margin-top: 50px;
    padding: 30px min(50px,4vw) 20px;
  }
  #author .h .en {
    font-size: 10px;
  }
  #author .author {
    margin-bottom: 25px;
  }
  #author .author .prof {
    gap: 15px;
  }
  #author .author .prof .photo {
    width: 76px;
    height: 76px;
  }
  #author .author .link {
    margin-top: 15px;
  }
  #author ul.post li a .title {
    padding-inline: 3px;
    font-size: 12px;
  }
  #author ul.post li a .postdata {
    flex-wrap: wrap;
    padding-inline: 3px;
    column-gap: 4px;
  }
  #author ul.post li a .postdata .date {
    font-size: 9px;
  }
  #author ul.post li a .postdata .cat {
    font-size: 9px;
    gap: 4px 3px;
  }
  #author ul.post li a .postdata .cat span::before {
    margin-right: 1px;
  }

  .pagenavi {
    margin-top: 45px;
  }
  .pagenavi ul li a {
    gap: 10px;
    height: 64px;
  }

  /* ---------- Archive-Link ---------- */
  .selectarea {
    margin-top: 35px;
    padding-block: 20px;
    display: block;
  }
  .selectarea dl {
    padding: 0;
    border-right: none;
  }
  .selectarea dl dt {
    width: 120px;
    text-align: right;
  }
  .selectarea dl dd {
    padding: 5px 0 5px 15px;
  }
}