@charset "UTF-8";
@import url("global.css");
/* ------------------------------
 Index-Page
------------------------------ */
/* ---------- Category-Link ---------- */
#catlink {
  border-top: #c9c9c9 1px solid;
  border-bottom: #c9c9c9 1px solid;
  padding: 25px 10px;
  margin-bottom: 80px;
}
#catlink .catlist {
  display: flex;
  align-items: center;
  gap: 25px;
}
#catlink .catlist .h {
  font-family: "Inter", "IBM Plex Sans JP", sans-serif;
  font-weight: 300;
}
#catlink .catlist ul {
  padding: 5px 0 5px 25px;
  display: flex;
  gap: 10px 20px;
  flex-wrap: wrap;
  border-left: #c9c9c9 1px solid;
}
#catlink .catlist ul li {
  line-height: 1.5;
}
#catlink .catlist ul li a {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 15px;
}
#catlink .catlist ul li a::before {
  content: "";
  display: block;
  width: 8px;
  height: 1px;
  background-color: #999;
}

/* ---------- Archive-Link ---------- */
.selectarea {
  margin-top: 40px;
  background-color: #E8ECEE;
  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: #F8F7F4 4px solid;
}
.selectarea dl:last-of-type {
  border: none;
}
.selectarea dl dt {
  line-height: 1;
  font-family: "Inter", "IBM Plex Sans JP", 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: #999;
}
.selectarea dl dd form select {
  font-family: "IBM Plex Sans JP", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "游ゴシック Medium", "Yu Gothic Medium", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro", "Meiryo", "メイリオ", Helvetica, sans-serif;
  border: #999 1px solid;
  border-radius: 2px;
  padding: 12px 30px 12px 12px;
  background-color: #F8F7F4;
  width: 100%;
  box-sizing: border-box;
  vertical-align: middle;
  box-shadow: none;
  letter-spacing: 1px;
  -webkit-appearance: none;
  appearance: none;
}

/* ---------- Index-Page ---------- */
ul.bloglist {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: min(50px,3vw);
}
ul.bloglist li {
  display: contents;
}
ul.bloglist li a {
  margin-bottom: 80px;
  display: grid;
  position: relative;
  gap: 0;
  grid-template-rows: subgrid;
  grid-row: span 5;
  line-height: 1.5;
  overflow: hidden;
}
@media (any-hover: hover) {
  ul.bloglist li a:hover .image img {
    filter: brightness(1.5);
  }
  ul.bloglist li a:hover .image::before {
    opacity: .8;
  }
  ul.bloglist li a:hover .image::after {
    opacity: 1;
    translate: 0;
  }
}
ul.bloglist li a .image {
  position: relative;
  aspect-ratio: 3 / 2;
  border-radius: 3px;
  overflow: hidden;
  position: relative;
  z-index: 0;
}
ul.bloglist li a .image img {
  transition: all 0.5s cubic-bezier(0.04, 0.435, 0.315, 0.9) 0s;
  backface-visibility: hidden;
}
ul.bloglist li a .image::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background-color: #4A4234;
  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 .author {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
  margin: -14px 5px -27px auto;
  z-index: 2;
}
ul.bloglist li a .author span {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  border: #F8F7F4 2px solid;
  overflow: hidden;
}
ul.bloglist li a .author figcaption {
  font-size: 13px;
  padding-top: 20px;
}
ul.bloglist li a .date {
  font-family: "Inter", "IBM Plex Sans JP", sans-serif;
  font-size: 12px;
  color: #999;
  margin-bottom: 14px;
}
ul.bloglist li a .title {
  margin-bottom: 12px;
  padding-bottom: 15px;
  font-weight: 500;
  border-bottom: #c9c9c9 1px solid;
}
ul.bloglist li a .cat {
  display: flex;
  gap: 5px 12px;
  padding-left: 5px;
  font-size: 12px;
}
ul.bloglist li a .cat span::before {
  content: "#";
  padding-right: 2px;
}

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

/* ------------------------------
 Post-Page
------------------------------ */
html:has(.post) {
  scroll-behavior: smooth;
}

.post .posttitle {
  margin-bottom: 80px;
  display: flex;
  column-gap: 30px;
  justify-content: space-between;
  border-top: #c9c9c9 1px solid;
  border-bottom: #c9c9c9 1px solid;
  padding: 50px 10px;
}
.post .posttitle .postdata {
  display: flex;
  column-gap: 20px;
  padding-top: 15px;
}
.post .posttitle .postdata .date {
  display: block;
  color: #999;
  padding-top: 3px;
  font-weight: 300;
  font-size: 90%;
  font-family: "Inter", "IBM Plex Sans JP", sans-serif;
}
.post .posttitle .postdata .date::after {
  content: "";
  display: inline-block;
  width: 15px;
  height: 1px;
  background-color: #999;
  vertical-align: 5px;
  margin-left: 8px;
}
.post .posttitle .postdata ul.cat {
  display: flex;
  gap: 5px;
}
.post .posttitle .postdata ul.cat li a {
  display: block;
  padding: 3px 10px;
  border-radius: 3px;
  font-size: .9em;
}
.post .posttitle .title {
  font-size: clamp(16px, 3vw, 23px);
  line-height: 1.5;
}
.post .posttitle .author a {
  display: flex;
  align-items: center;
  gap: 15px;
}
.post .posttitle .author span {
  display: block;
}
.post .posttitle .author .name {
  font-size: .9em;
  font-weight: 500;
  white-space: nowrap;
}
.post .posttitle .author .photo {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  overflow: hidden;
}
.post #postbody {
  margin-bottom: 80px;
}
.post #postbody h1, .post #postbody h2, .post #postbody h3, .post #postbody h4, .post #postbody h5, .post #postbody h6 {
  position: relative;
}

#author {
  margin-top: 60px;
  background-color: #F0EDDF;
  border-radius: 4px;
  padding: min(50px,4vw);
  display: flex;
  align-items: flex-start;
  gap: min(40px,3vw);
}
#author .author {
  flex-shrink: 0;
  width: 280px;
}
#author .author .title {
  margin-bottom: 20px;
  line-height: 1.5;
  font-size: 20px;
  font-family: "Cormorant Garamond", serif;
}
#author .author .title::after {
  content: "";
  width: 40px;
  height: 1px;
  background-color: #999;
  display: inline-block;
  vertical-align: 5px;
  margin-left: 10px;
}
#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: .9em;
  margin-bottom: 5px;
  display: block;
}
#author .author .prof .name strong {
  display: block;
  font-weight: 500;
  letter-spacing: .1em;
}
#author .author .link {
  margin-top: 20px;
}
#author .author .link a {
  max-width: 200px;
  font-size: .8em;
  padding: 5px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-image: linear-gradient(#4A4234, #4A4234);
  background-repeat: no-repeat;
  background-position: bottom left;
  background-size: 100% 1px;
  transition: background-size 0.5s cubic-bezier(0.04, 0.435, 0.315, 0.9);
}
@media (any-hover: hover) {
  #author .author .link a:hover {
    background-position: bottom right;
    background-size: 0 1px;
  }
}
#author .author .link a strong {
  font-size: 1.1em;
  font-weight: 500;
  padding-right: 3px;
}
#author .author .link a::after {
  content: "\f105";
  font-family: 'Font Awesome 6 free','Font Awesome 6 Brands';
  font-weight: 900;
  color: #999;
  margin-left: 20px;
}
#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 .thumb img {
    filter: brightness(1.5);
  }
  #author ul.post li a:hover .image .thumb::before {
    opacity: .8;
  }
  #author ul.post li a:hover .image .thumb::after {
    opacity: 1;
    translate: 0;
  }
}
#author ul.post li a .image {
  position: relative;
  aspect-ratio: 3 / 2;
  border-radius: 3px;
  overflow: hidden;
  position: relative;
  margin-bottom: 10px;
  z-index: 0;
}
#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;
}
#author ul.post li a .image::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background-color: #4A4234;
  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: 8px;
  font-weight: 500;
  font-size: 14px;
}
#author ul.post li a .postdata {
  display: flex;
  padding-inline: 5px;
  column-gap: 5px;
  margin-top: auto;
}
#author ul.post li a .date {
  font-size: 12px;
  color: #999;
}
#author ul.post li a .cat {
  font-size: 12px;
  letter-spacing: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 3px;
}
#author ul.post li a .cat span {
  display: block;
}
#author ul.post li a .cat span::before {
  content: "";
  width: 6px;
  height: 1px;
  background-color: #999;
  display: inline-block;
  margin-right: 4px;
  vertical-align: 4px;
}

.pagenavi {
  margin-top: 80px;
}
.pagenavi ul li a {
  gap: 20px;
}
.pagenavi ul li a .image {
  width: 80px;
  aspect-ratio: 1 / 1;
}
.pagenavi ul li a .text {
  font-size: inherit;
}
.pagenavi ul li.right a {
  justify-content: flex-start;
  flex-direction: row-reverse;
}

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

 Responsive-Breakpoint ( 1300px )
 
------------------------------------------------------------------------------------------------------------------------ */
@media only screen and (max-width: 1300px) {
  /* ------------------------------
   Index-Page
  ------------------------------ */
  /* ---------- Index-Page ---------- */
  ul.bloglist {
    grid-template-columns: repeat(3, 1fr);
  }

  /* ------------------------------
   Post-Page
  ------------------------------ */
  #author ul.post li a .postdata {
    display: block;
  }
  #author ul.post li a .cat {
    font-size: 11px;
  }
}
/* ------------------------------------------------------------------------------------------------------------------------

 Responsive-Breakpoint-2 ( 959px )
 
------------------------------------------------------------------------------------------------------------------------ */
@media only screen and (max-width: 959px) {
  /* ------------------------------
   Index-Page
  ------------------------------ */
  /* ---------- Category-Link ---------- */
  #catlink .catlist {
    gap: 20px;
  }
  #catlink .catlist ul li a {
    font-size: 14px;
  }

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

  /* ---------- Index-Page ---------- */
  ul.bloglist {
    grid-template-columns: repeat(2, 1fr);
    column-gap: 5vw;
  }
  ul.bloglist li a {
    margin-bottom: 60px;
  }

  /* ------------------------------
   Post-Page
  ------------------------------ */
  .post .posttitle {
    display: block;
    position: relative;
    padding-block: 40px;
    margin-bottom: 70px;
  }
  .post .posttitle .title {
    font-weight: 500;
  }
  .post .posttitle .author {
    position: absolute;
    bottom: -30px;
    right: 0;
    padding: 0;
  }
  .post .posttitle .author a {
    gap: 0;
  }
  .post .posttitle .author .name {
    font-size: inherit;
    background-color: #F8F7F4;
    padding: 0 15px;
  }

  #author {
    padding: 40px 5vw;
    display: block;
    gap: min(50px,4vw);
  }
  #author .author {
    width: auto;
    margin-bottom: 20px;
  }
  #author .author > div {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 50px;
  }
  #author .author .title {
    text-align: center;
    margin-bottom: 10px;
  }
  #author .author .title::after {
    display: none;
  }
  #author .author .prof {
    gap: 20px;
  }
  #author .author .prof .photo {
    width: 120px;
    height: 120px;
  }
  #author .author .link {
    margin-top: 0;
  }
  #author .author .link a strong {
    padding-right: 10px;
  }

  .pagenavi {
    margin-top: 60px;
  }
  .pagenavi ul li a {
    gap: 15px;
  }
  .pagenavi ul li a .image {
    width: 60px;
  }
}
/* ------------------------------------------------------------------------------------------------------------------------

 Responsive-Breakpoint-3 ( 644px )
 
------------------------------------------------------------------------------------------------------------------------ */
@media only screen and (max-width: 644px) {
  /* ------------------------------
   Index-Page
  ------------------------------ */
  /* ---------- Category-Link ---------- */
  #catlink {
    padding: 20px 10px 25px;
    margin-bottom: 60px;
  }
  #catlink .catlist {
    display: block;
  }
  #catlink .catlist .h {
    font-weight: 500;
    margin-bottom: 10px;
  }
  #catlink .catlist ul {
    padding: 0;
    gap: 8px 15px;
    border-left: none;
  }
  #catlink .catlist ul li a {
    font-size: 13px;
  }
  #catlink .catlist ul li a::before {
    width: 6px;
  }

  /* ---------- Archive-Link ---------- */
  .selectarea {
    margin-block: 20px -30px;
    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;
  }

  /* ---------- Index-Page ---------- */
  ul.bloglist {
    display: block;
  }
  ul.bloglist li {
    display: block;
    margin-bottom: 60px;
  }
  ul.bloglist li a {
    margin-bottom: 0;
    display: block;
  }
  ul.bloglist li a .author {
    margin: -16px 5px -29px auto;
  }
  ul.bloglist li a .author figcaption {
    font-size: 12px;
  }
  ul.bloglist li a .title {
    font-size: min(17px,4vw);
  }
  ul.bloglist li a .cat {
    font-size: 11px;
  }

  /* ---------- Category-Title ---------- */
  #cattitle {
    margin-block: -10px 40px;
  }
  #cattitle .cattitle {
    font-size: 15px;
  }
  #cattitle .cattitle strong {
    margin-right: 8px;
    font-size: 1.5em;
  }

  /* ------------------------------
   Post-Page
  ------------------------------ */
  .post .posttitle {
    margin-bottom: 60px;
    padding-block: 35px 40px;
  }
  .post .posttitle .postdata {
    column-gap: 10px;
    padding-top: 10px;
  }
  .post .posttitle .postdata .date {
    padding-top: 2px;
  }
  .post .posttitle .postdata .date::after {
    display: none;
  }
  .post .posttitle .postdata ul.cat {
    gap: 3px 5px;
  }
  .post .posttitle .postdata ul.cat li a {
    display: block;
    padding: 3px;
    border-radius: 3px;
    font-size: .85em;
    letter-spacing: 0;
  }
  .post .posttitle .postdata ul.cat li a::before {
    content: "";
    width: 8px;
    height: 1px;
    display: inline-block;
    vertical-align: 5px;
    margin-right: 6px;
    background-color: #999;
  }
  .post .posttitle .author {
    bottom: -26px;
  }
  .post .posttitle .author .photo {
    width: 50px;
    height: 50px;
  }
  .post #postbody {
    margin-bottom: 60px;
  }

  #author {
    margin-top: 40px;
    padding: 30px 4vw;
  }
  #author .author {
    margin-bottom: 25px;
  }
  #author .author > div {
    display: block;
    justify-content: center;
    align-items: center;
    gap: 50px;
  }
  #author .author .title {
    margin-bottom: 10px;
    font-size: 19px;
  }
  #author .author .prof {
    justify-content: center;
    margin-bottom: 5px;
  }
  #author .author .prof .photo {
    width: 90px;
    height: 90px;
  }
  #author .author .prof .name .job {
    font-size: .9em;
    margin-bottom: 5px;
    display: block;
  }
  #author .author .prof .name strong {
    font-size: 1.1em;
  }
  #author .author .link a {
    margin-inline: auto;
  }
  #author ul.post {
    gap: 3vw;
  }
  #author ul.post li a .image {
    margin-bottom: 6px;
  }
  #author ul.post li a .title {
    padding-inline: 2px;
    margin-bottom: 3px;
    font-size: 11px;
    letter-spacing: 0;
  }
  #author ul.post li a .postdata {
    display: block;
    padding-inline: 2px;
  }
  #author ul.post li a .date {
    font-size: 9px;
    letter-spacing: 0;
  }
  #author ul.post li a .cat {
    font-size: 9px;
  }
  #author ul.post li a .cat span {
    margin-inline: 0 8px;
  }
  #author ul.post li a .cat span::before {
    width: 5px;
    vertical-align: 3px;
  }

  .pagenavi {
    margin-top: 40px;
  }
  .pagenavi ul li a {
    gap: 12px;
    font-size: 13px;
  }
  .pagenavi ul li a .image {
    width: 55px;
  }
}

/*# sourceMappingURL=blog.css.map */