@charset "UTF-8";
@import url("global.css");
#catnavi_list {
  padding: 30px 5vw;
  border-top: #A2A2A2 solid 1px;
  border-bottom: #A2A2A2 solid 1px;
  margin-bottom: 120px;
  display: flex;
  align-items: stretch;
  justify-content: flex-start; }
  #catnavi_list .title {
    width: 150px;
    color: #3A3A66;
    font-family: "Jost", "Zen Kaku Gothic New", sans-serif; }
  #catnavi_list ul {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 10px 20px; }
    #catnavi_list ul > li a {
      display: block;
      font-family: "Zen Old Mincho", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif; }
      #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(#F5F5F5, #F5F5F5);
      background-size: 100% 12px; }

.selectarea {
  margin-top: 60px;
  border-top: #A2A2A2 solid 1px;
  border-bottom: #A2A2A2 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: #F5F5F5;
        border-radius: 2px;
        padding: 15px;
        width: 100%;
        box-sizing: border-box;
        vertical-align: middle;
        box-shadow: none;
        letter-spacing: 1px; }

/* ------------------------------
 Archive
------------------------------ */
.list_blog {
  --gap: 18px;
  display: flex;
  flex-wrap: wrap;
  margin: 0 calc(-1 * var(--gap)) 80px;
  row-gap: 50px; }
  .list_blog li {
    width: 25%;
    box-sizing: border-box;
    padding-inline: var(--gap); }
    .list_blog li a {
      display: flex;
      flex-direction: column;
      height: 100%; }
      @media (any-hover: hover) {
        .list_blog li a:hover .image img {
          filter: blur(2px); }
        .list_blog li a:hover .image::before {
          opacity: .6; }
        .list_blog li a:hover .image::after {
          opacity: 1;
          translate: 20px 0; } }
    .list_blog li .image {
      position: relative;
      height: auto;
      aspect-ratio: 3 / 2;
      overflow: hidden; }
      .list_blog 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; }
      .list_blog 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; }
      .list_blog 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; }
    .list_blog li .author {
      position: relative;
      z-index: 1;
      margin: -10px 0 -28px auto;
      display: flex;
      align-items: center;
      gap: 10px; }
      .list_blog li .author .name {
        font-size: 13px;
        padding-top: 10px; }
      .list_blog li .author .photo {
        width: 44px;
        height: 44px;
        border: #F5F5F5 2px solid;
        border-radius: 50%;
        overflow: hidden;
        display: block; }
    .list_blog li .date {
      font-size: 12px;
      color: #7E7F85;
      padding-left: 5px;
      margin-bottom: 8px; }
    .list_blog li .title {
      line-height: 1.5;
      padding-inline: 5px;
      margin-bottom: 8px;
      font-weight: 500; }
  .list_blog .cat {
    display: flex;
    flex-wrap: wrap;
    padding-left: 5px;
    gap: 2px 12px;
    margin-top: auto; }
    .list_blog .cat span {
      display: block;
      font-size: 12px;
      letter-spacing: 0; }
      .list_blog .cat span::before {
        content: "";
        width: 8px;
        height: 1px;
        display: inline-block;
        margin-right: 5px;
        background-color: #7E7F85;
        vertical-align: 4px; }

/* ------------------------------
 Category
------------------------------ */
.cattitle {
  margin-block: -60px 100px;
  line-height: 1.4;
  position: relative;
  text-align: center; }
  .cattitle::before {
    content: "";
    width: 1px;
    height: 60px;
    background: rgba(58, 58, 102, 0.5);
    position: absolute;
    left: 50%;
    bottom: -70px; }
  .cattitle p {
    font-size: clamp(16px, 2.6vw, 22px);
    font-family: "Zen Old Mincho", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif; }

/* ------------------------------
 Single
------------------------------ */
#sec_pagetitle .posttitle {
  line-height: 1.4;
  margin-bottom: 10px;
  font-size: clamp(18px, 3vw, 28px);
  font-family: "Zen Old Mincho", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif; }
#sec_pagetitle time {
  color: #7E7F85;
  margin-bottom: 10px;
  font-size: 15px;
  font-family: "Jost", "Zen Kaku Gothic New", sans-serif; }
#sec_pagetitle ul.cat {
  display: flex;
  gap: 5px; }
  #sec_pagetitle ul.cat li a {
    display: block;
    font-size: 14px; }
    #sec_pagetitle ul.cat li a::before {
      content: "#";
      margin-right: 3px; }

#postbody {
  border-top: 1px solid #A2A2A2;
  padding-block: 40px 0; }
  #postbody .postbody {
    margin-block: 0 50px; }
  #postbody .auth_info {
    margin: 60px 0 40px; }
    #postbody .auth_info .auth_main {
      background-color: #F5F5F5;
      padding: 40px 40px;
      display: flex;
      align-items: center;
      justify-content: space-between; }
      #postbody .auth_info .auth_main .prof_area {
        flex-shrink: 0;
        width: 300px;
        padding-right: 30px;
        margin-right: 40px;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        text-align: left;
        position: relative; }
        #postbody .auth_info .auth_main .prof_area::after {
          content: "";
          position: absolute;
          width: 1px;
          top: 20px;
          bottom: 20px;
          right: 0;
          background-color: #7E7F85;
          display: block; }
        #postbody .auth_info .auth_main .prof_area figure {
          flex-shrink: 0;
          width: 120px;
          height: 120px;
          background-color: #FFF;
          border-radius: 50%;
          overflow: hidden; }
        #postbody .auth_info .auth_main .prof_area .text {
          padding-left: 20px;
          line-height: 1; }
          #postbody .auth_info .auth_main .prof_area .text .auth_title {
            font-size: 14px; }
          #postbody .auth_info .auth_main .prof_area .text .auth_name {
            margin: 10px 0 20px;
            font-weight: 700;
            white-space: nowrap; }
          #postbody .auth_info .auth_main .prof_area .text .auth_link {
            margin-left: -10px; }
            #postbody .auth_info .auth_main .prof_area .text .auth_link a {
              display: inline-block;
              font-size: 12px;
              font-weight: 500;
              background-color: #fff;
              border-radius: 50px;
              padding: 6px 20px 6px 10px;
              line-height: 1.5;
              text-align: center;
              position: relative; }
              #postbody .auth_info .auth_main .prof_area .text .auth_link a br {
                display: none; }
        #postbody .auth_info .auth_main .prof_area .comment {
          margin-top: 20px;
          width: 100%;
          font-size: 12px;
          text-align: justify; }
      #postbody .auth_info .auth_main .posts {
        width: 100%;
        box-sizing: border-box; }
        #postbody .auth_info .auth_main .posts ul {
          display: flex;
          flex-wrap: wrap;
          margin: 0 -10px; }
          #postbody .auth_info .auth_main .posts ul li {
            width: 33.3333333333%;
            padding: 0 10px;
            box-sizing: border-box; }
            #postbody .auth_info .auth_main .posts ul li a {
              display: block;
              font-size: 12px; }
              #postbody .auth_info .auth_main .posts ul li a:hover {
                opacity: .7; }
              #postbody .auth_info .auth_main .posts ul li a .image {
                position: relative; }
                #postbody .auth_info .auth_main .posts ul li a .image figure {
                  height: 0;
                  padding-top: 60%;
                  position: relative;
                  overflow: hidden; }
                  #postbody .auth_info .auth_main .posts ul li a .image figure img {
                    position: absolute;
                    left: 0;
                    top: 0; }
              #postbody .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; }
                #postbody .auth_info .auth_main .posts ul li a .date::after {
                  content: "-";
                  display: inline-block;
                  margin-left: 5px; }
              #postbody .auth_info .auth_main .posts ul li a .title {
                font-weight: 700;
                margin: 0 5px; }

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

 Responsive-Breakpoint-1 ( 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; }

  /* ------------------------------
   Archive
  ------------------------------ */
  .list_blog li {
    width: 33.3333333333%; }

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

 Responsive-Breakpoint-2 ( 959px )
 
------------------------------------------------------------------------------------------------------------------------ */
@media only screen and (max-width: 959px) {
  #catnavi_list {
    margin-bottom: 90px; }
    #catnavi_list .title {
      width: 100px; }
    #catnavi_list ul {
      gap: 10px 20px;
      padding-left: 15px; }

  .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; }

  /* ------------------------------
   Archive
  ------------------------------ */
  .list_blog li {
    width: 50%; }

  /* ------------------------------
   Category
  ------------------------------ */
  .cattitle {
    margin-block: -40px 100px; }

  /* ------------------------------
   Single
  ------------------------------ */
  #sec_pagetitle .posttitle {
    margin-bottom: 5px; }
  #sec_pagetitle time {
    font-size: 14px; }
  #sec_pagetitle ul.cat li a {
    font-size: 12px;
    letter-spacing: .05em; }

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

 Responsive-Breakpoint-3 ( 644px )
 
------------------------------------------------------------------------------------------------------------------------ */
@media only screen and (max-width: 644px) {
  #catnavi_list {
    margin-bottom: 45px;
    padding: 20px 3vw; }
    #catnavi_list .title {
      width: 80px; }
    #catnavi_list ul {
      gap: 7px 18px; }
      #catnavi_list ul > li a {
        font-size: 12px; }

  .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; }

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

  /* ------------------------------
   Category
  ------------------------------ */
  .cattitle {
    margin-block: 0 80px; }
    .cattitle::before {
      height: 50px;
      bottom: -60px; }

  /* ------------------------------
   Single
  ------------------------------ */
  #sec_pagetitle time {
    margin-bottom: 5px;
    font-size: 11px; }
  #sec_pagetitle ul.cat li a {
    font-size: 11px; }

  #postbody .auth_info {
    margin: 60px 0 40px; }
    #postbody .auth_info .auth_main {
      padding: 35px 5.5vw; }
      #postbody .auth_info .auth_main .prof_area {
        margin: 0 0 20px; }
        #postbody .auth_info .auth_main .prof_area figure {
          width: 100px;
          height: 100px; }
        #postbody .auth_info .auth_main .prof_area .text .auth_title {
          font-size: 13px; }
        #postbody .auth_info .auth_main .prof_area .text .auth_name {
          margin: 10px 0 15px;
          font-size: 15px; }
      #postbody .auth_info .auth_main .posts ul li a {
        font-size: 11px; }
        #postbody .auth_info .auth_main .posts ul li a .date {
          font-size: 10px; }
        #postbody .auth_info .auth_main .posts ul li a .title {
          letter-spacing: .05em; } }