@charset "UTF-8";
@import url("global.css");
#pagetitle .cattitle {
  margin-top: 10px;
  text-align: center;
}
#pagetitle .cattitle > p {
  font-family: "Zen Old Mincho", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  font-weight: 600;
  font-size: 1.125em;
  color: #8D8D8D;
}
#pagetitle .cattitle > p small {
  font-size: 85%;
  margin-left: 5px;
}
#pagetitle .cattitle > p::before {
  content: "#";
  display: inline-block;
}

#catnavi_list {
  padding: 30px 5vw;
  border-top: #E1E1E1 solid 1px;
  border-bottom: #E1E1E1 solid 1px;
  margin-bottom: 120px;
}
#catnavi_list .title {
  text-align: center;
  margin-bottom: 20px;
  color: #8D8D8D;
  font-family: "Jost", "Zen Kaku Gothic New", sans-serif;
  font-size: 1.5em;
}
#catnavi_list ul {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px 20px;
}
#catnavi_list ul > li a {
  display: block;
  color: #706D65;
  font-family: "Zen Old Mincho", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  font-weight: 500;
}
#catnavi_list ul > li a::before {
  content: "#";
  margin-right: 3px;
}
#catnavi_list ul > li.current a {
  cursor: default;
  background-repeat: no-repeat;
  background-position: bottom right;
  background-image: linear-gradient(#E5E5E5, #E5E5E5);
  background-size: 100% 12px;
}

.selectarea {
  margin-top: 60px;
  border-top: #E1E1E1 solid 1px;
  border-bottom: #E1E1E1 solid 1px;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
}
.selectarea dl {
  display: flex;
  align-items: center;
  padding: 0 40px;
  box-sizing: border-box;
}
.selectarea dl dt {
  line-height: 1;
}
.selectarea dl dd {
  padding: 35px 0 35px 15px;
}
.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;
  background-color: #fff;
  border-radius: 2px;
  padding: 15px;
  width: 100%;
  box-sizing: border-box;
  vertical-align: middle;
  box-shadow: none;
  letter-spacing: 1px;
}

/* ------------------------------
 Index
------------------------------ */
.archive .list {
  --gap: 18px;
  display: flex;
  flex-wrap: wrap;
  margin: 0 calc(-1 * var(--gap)) 80px;
  row-gap: 50px;
}
.archive .list li {
  width: 25%;
  box-sizing: border-box;
  padding-inline: var(--gap);
}
.archive .list li a {
  display: flex;
  flex-direction: column;
  height: 100%;
}
@media (any-hover: hover) {
  .archive .list li a:hover .image img {
    filter: blur(2px);
  }
  .archive .list li a:hover .image::before {
    opacity: .6;
  }
  .archive .list li a:hover .image::after {
    opacity: 1;
    translate: 20px 0;
  }
}
.archive .list li .image {
  position: relative;
  height: auto;
  aspect-ratio: 3 / 2;
  overflow: hidden;
}
.archive .list li .image img {
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  transition: all 0.5s cubic-bezier(0.04, 0.435, 0.315, 0.9) 0s;
  backface-visibility: hidden;
}
.archive .list li .image::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: #1D1D1D;
  mix-blend-mode: multiply;
  opacity: 0;
  z-index: 1;
  transition: all 0.5s cubic-bezier(0.04, 0.435, 0.315, 0.9) 0s;
  backface-visibility: hidden;
}
.archive .list li .image::after {
  content: "詳しく見る";
  color: #fff;
  position: absolute;
  bottom: 15px;
  right: 40px;
  z-index: 2;
  font-family: "Zen Old Mincho", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  opacity: 0;
  transition: all 0.5s cubic-bezier(0.04, 0.435, 0.315, 0.9) 0.2s;
  backface-visibility: hidden;
}
.archive .list li .author {
  position: relative;
  z-index: 1;
  margin: -10px 0 -28px auto;
  display: flex;
  align-items: center;
  gap: 10px;
}
.archive .list li .author .name {
  font-size: 13px;
  padding-top: 10px;
}
.archive .list li .author .photo {
  width: 44px;
  height: 44px;
  border: #E5E5E5 2px solid;
  border-radius: 50%;
  overflow: hidden;
  display: block;
}
.archive .list li .date {
  font-size: 12px;
  color: #706D65;
  padding-left: 5px;
  margin-bottom: 8px;
}
.archive .list li .title {
  line-height: 1.5;
  padding-inline: 5px;
  margin-bottom: 8px;
  font-weight: 500;
}
.archive .list .cat {
  display: flex;
  flex-wrap: wrap;
  padding-left: 5px;
  gap: 2px 12px;
  margin-top: auto;
}
.archive .list .cat span {
  display: block;
  font-size: 12px;
  letter-spacing: 0;
}
.archive .list .cat span::before {
  content: "";
  width: 8px;
  height: 1px;
  display: inline-block;
  margin-right: 5px;
  background-color: #706D65;
  vertical-align: 4px;
}

/* ------------------------------
 Entry
------------------------------ */
.entry #post .post-title {
  margin-bottom: 80px;
}
.entry #post .post-title .title {
  font-family: "Zen Old Mincho", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  font-size: min(28px,5vw);
  font-weight: 500;
  line-height: 1.5;
  margin-bottom: 20px;
  letter-spacing: .1em;
}
.entry #post .post-title .sub {
  display: flex;
}
.entry #post .post-title .sub .date {
  display: block;
  font-family: "Jost", "Zen Kaku Gothic New", sans-serif;
  margin-right: 10px;
}
.entry #post .post-title .sub .date::after {
  content: "";
  width: 14px;
  height: 1px;
  display: inline-block;
  margin-left: 10px;
  background-color: #706D65;
  vertical-align: 5px;
}
.entry #post .post-title .sub ul.cat {
  display: flex;
  gap: 10px;
}
.entry #post .post-title .sub ul.cat li a {
  display: block;
  font-size: 14px;
  color: #706D65;
}
.entry #post .post-title .sub ul.cat li a::before {
  content: "#";
  margin-right: 3px;
}
.entry #post .postbody img {
  width: auto !important;
  height: auto !important;
}
.entry #post .auth_info {
  margin: 80px 0 40px;
}
.entry #post .auth_info .auth_main {
  background-color: #fff;
  padding: 40px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.entry #post .auth_info .auth_main .prof_area {
  flex-shrink: 0;
  padding-right: 30px;
  margin-right: 40px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  text-align: left;
  position: relative;
}
.entry #post .auth_info .auth_main .prof_area::after {
  content: "";
  position: absolute;
  width: 1px;
  top: 20px;
  bottom: 20px;
  right: 0;
  background-color: #D6D6D6;
  display: block;
}
.entry #post .auth_info .auth_main .prof_area figure {
  flex-shrink: 0;
  width: 120px;
  height: 120px;
  background-color: #FFF;
  border-radius: 50%;
  overflow: hidden;
}
.entry #post .auth_info .auth_main .prof_area .text {
  padding-left: 20px;
  line-height: 1;
}
.entry #post .auth_info .auth_main .prof_area .text .auth_title {
  font-size: 14px;
}
.entry #post .auth_info .auth_main .prof_area .text .auth_name {
  margin: 10px 0 20px;
  font-weight: 700;
  white-space: nowrap;
}
.entry #post .auth_info .auth_main .prof_area .text .auth_link {
  margin-left: -10px;
}
.entry #post .auth_info .auth_main .prof_area .text .auth_link a {
  display: inline-block;
  font-size: 12px;
  font-weight: 500;
  background-color: #E5E5E5;
  padding: 6px 20px 6px 10px;
  line-height: 1.5;
  text-align: center;
  position: relative;
}
.entry #post .auth_info .auth_main .prof_area .text .auth_link a br {
  display: none;
}
.entry #post .auth_info .auth_main .prof_area .comment {
  margin-top: 20px;
  width: 100%;
  font-size: 12px;
  text-align: justify;
}
.entry #post .auth_info .auth_main .posts {
  width: 100%;
  box-sizing: border-box;
}
.entry #post .auth_info .auth_main .posts ul {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -10px;
}
.entry #post .auth_info .auth_main .posts ul li {
  width: 33.3333333333%;
  padding: 0 10px;
  box-sizing: border-box;
}
.entry #post .auth_info .auth_main .posts ul li a {
  display: block;
  font-size: 12px;
}
.entry #post .auth_info .auth_main .posts ul li a:hover {
  opacity: .7;
}
.entry #post .auth_info .auth_main .posts ul li a .image {
  position: relative;
}
.entry #post .auth_info .auth_main .posts ul li a .image figure {
  height: 0;
  padding-top: 60%;
  position: relative;
  overflow: hidden;
}
.entry #post .auth_info .auth_main .posts ul li a .image figure img {
  position: absolute;
  left: 0;
  top: 0;
}
.entry #post .auth_info .auth_main .posts ul li a .date {
  line-height: 1;
  font-family: "Jost", "Zen Kaku Gothic New", sans-serif;
  margin: 12px 5px 2px;
}
.entry #post .auth_info .auth_main .posts ul li a .date::after {
  content: "-";
  display: inline-block;
  margin-left: 5px;
}
.entry #post .auth_info .auth_main .posts ul li a .title {
  font-weight: 700;
  margin: 0 5px;
}

.pageback {
  border-top: none;
  padding-top: 0;
}

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

 Responsive-Breakpoint-1 ( 1600px )

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

 Responsive-Breakpoint-2 ( 1300px )

------------------------------------------------------------------------------------------------------------------------ */
@media only screen and (max-width: 1300px) {
  .selectarea {
    margin-top: 50px;
  }
  .selectarea dl {
    width: 33.3333333333%;
    display: block;
    text-align: center;
    padding: 25px 20px;
  }
  .selectarea dl dd {
    padding: 10px 0 0 0;
  }

  /* ------------------------------
   Index
  ------------------------------ */
  .archive .list li {
    width: 33.3333333333%;
  }

  /* ------------------------------
   Entry
  ------------------------------ */
  .entry #post .auth_info .auth_main .prof_area {
    padding-right: 20px;
    margin-right: 30px;
  }
  .entry #post .auth_info .auth_main .posts ul {
    margin: 0 -.7vw;
  }
  .entry #post .auth_info .auth_main .posts ul li {
    padding: 0 .7vw;
  }
}
/* ------------------------------------------------------------------------------------------------------------------------

 Responsive-Breakpoint-3 ( 959px )

------------------------------------------------------------------------------------------------------------------------ */
@media only screen and (max-width: 959px) {
  #catnavi_list {
    margin-bottom: 90px;
  }
  #catnavi_list .title {
    margin-bottom: 15px;
    font-size: 1.4em;
  }
  #catnavi_list ul {
    gap: 10px 20px;
  }

  .selectarea {
    margin-top: 45px;
    display: block;
    padding: 15px 0;
  }
  .selectarea dl {
    width: auto;
    display: flex;
    padding: 7px 20px;
  }
  .selectarea dl + dl {
    border-left: none;
  }
  .selectarea dl dt {
    text-align: right;
    width: 140px;
    flex-shrink: 0;
  }
  .selectarea dl dd {
    width: 100%;
    padding: 0 0 0 15px;
    box-sizing: border-box;
  }

  /* ------------------------------
   Index
  ------------------------------ */
  .archive .list li {
    width: 50%;
  }

  /* ------------------------------
   Entry
  ------------------------------ */
  .entry #post .post-title {
    margin-bottom: 60px;
  }
  .entry #post .post-title .sub ul.cat li a {
    font-size: 12px;
    letter-spacing: .05em;
  }
  .entry #post .auth_info .auth_main {
    display: block;
  }
  .entry #post .auth_info .auth_main .prof_area {
    width: auto;
    padding-right: 0;
    margin: 0 0 30px;
    justify-content: center;
  }
  .entry #post .auth_info .auth_main .prof_area::after {
    display: none;
  }
  .entry #post .auth_info .auth_main .prof_area .comment {
    margin-top: 15px;
    text-align: center;
  }
  .entry #post .auth_info .auth_main .posts ul {
    margin: 0 -1vw;
  }
  .entry #post .auth_info .auth_main .posts ul li {
    padding: 0 1vw;
  }
  .entry #post .auth_info .auth_main .posts ul li a:hover {
    opacity: 1;
  }
  .entry #post .auth_info .auth_main .posts ul li a .date {
    margin: 12px 3px 2px;
    letter-spacing: .05em;
  }
  .entry #post .auth_info .auth_main .posts ul li a .title {
    margin: 0 3px;
  }
}
/* ------------------------------------------------------------------------------------------------------------------------

 Responsive-Breakpoint-4 ( 644px )

------------------------------------------------------------------------------------------------------------------------ */
@media only screen and (max-width: 644px) {
  #catnavi_list {
    margin-bottom: 45px;
    padding: 20px 3vw;
  }
  #catnavi_list .title {
    margin-bottom: 10px;
    font-size: 1.35em;
  }
  #catnavi_list ul {
    gap: 7px 18px;
  }

  .selectarea {
    padding: 12px 0;
  }
  .selectarea dl {
    padding: 5px 15px;
  }
  .selectarea dl dt {
    letter-spacing: 0;
    width: 100px;
  }
  .selectarea dl dd {
    padding: 0 0 0 10px;
  }

  /* ------------------------------
   Index
  ------------------------------ */
  .archive .list {
    display: block;
    margin: 0 0 60px;
  }
  .archive .list li {
    width: auto;
    padding-inline: 0;
    margin-bottom: 40px;
  }
  .archive .list li a {
    display: block;
  }
  .archive .list li .author {
    justify-content: flex-end;
    margin: -6px 0 -27px auto;
  }
  .archive .list li .author .name {
    font-size: 12px;
    padding-top: 10px;
  }
  .archive .list li .author .photo {
    width: 40px;
    height: 40px;
  }
  .archive .list li .date {
    margin-bottom: 8px;
  }
  .archive .list .title {
    margin-bottom: 5px;
  }

  /* ------------------------------
   Entry
  ------------------------------ */
  .entry #post .post-title {
    margin-bottom: 50px;
  }
  .entry #post .post-title .title {
    font-size: min(28px,5.5vw);
    margin-bottom: 10px;
  }
  .entry #post .post-title .sub {
    align-items: center;
  }
  .entry #post .post-title .sub .date {
    margin-right: 8px;
    padding-top: 2px;
  }
  .entry #post .post-title .sub ul.cat {
    gap: 8px;
  }
  .entry #post .post-title .sub ul.cat li a {
    font-size: 11px;
  }
  .entry #post .auth_info {
    margin: 60px 0 40px;
  }
  .entry #post .auth_info .auth_main {
    padding: 35px 5.5vw;
  }
  .entry #post .auth_info .auth_main .prof_area {
    margin: 0 0 20px;
  }
  .entry #post .auth_info .auth_main .prof_area figure {
    width: 100px;
    height: 100px;
  }
  .entry #post .auth_info .auth_main .prof_area .text .auth_title {
    font-size: 13px;
  }
  .entry #post .auth_info .auth_main .prof_area .text .auth_name {
    margin: 10px 0 15px;
    font-size: 15px;
  }
  .entry #post .auth_info .auth_main .posts ul li a {
    font-size: 11px;
  }
  .entry #post .auth_info .auth_main .posts ul li a .date {
    font-size: 10px;
  }
  .entry #post .auth_info .auth_main .posts ul li a .title {
    letter-spacing: .05em;
  }
}