@charset "UTF-8";
@import url("global.css");
#bodyarea {
  padding-top: 40px; }

#blog-container #blogmain {
  float: right;
  width: 73%; }
  #blog-container #blogmain #indexlist {
    display: -webkit-flex;
    display: flex;
    flex-wrap: wrap;
    margin: 0 -3%; }
    #blog-container #blogmain #indexlist > li {
      width: 50%;
      box-sizing: border-box;
      padding: 0 3% 80px; }
      #blog-container #blogmain #indexlist > li a {
        display: block; }
        #blog-container #blogmain #indexlist > li a:hover .ph::after {
          opacity: 1; }
        #blog-container #blogmain #indexlist > li a:hover .ph .img img {
          transform: scale(1.1);
          -webkit-transform: scale(1.1); }
        #blog-container #blogmain #indexlist > li a:hover .ph .arrow {
          opacity: 1; }
        #blog-container #blogmain #indexlist > li a .ph {
          position: relative;
          overflow: hidden; }
          #blog-container #blogmain #indexlist > li a .ph::after {
            content: "";
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(31, 31, 31, 0.6);
            transition: all 0.6s cubic-bezier(0.52, 0.08, 0.18, 1);
            -webkit-transition: all 0.6s cubic-bezier(0.52, 0.08, 0.18, 1);
            backface-visibility: hidden;
            -webkit-backface-visibility: hidden;
            opacity: 0;
            z-index: 1; }
          #blog-container #blogmain #indexlist > li a .ph .img {
            position: relative;
            height: 0;
            padding-top: 66%; }
            #blog-container #blogmain #indexlist > li a .ph .img img {
              position: absolute;
              left: 0;
              top: 0;
              transition: all 0.6s cubic-bezier(0.52, 0.08, 0.18, 1);
              -webkit-transition: all 0.6s cubic-bezier(0.52, 0.08, 0.18, 1);
              backface-visibility: hidden;
              -webkit-backface-visibility: hidden; }
          #blog-container #blogmain #indexlist > li a .ph .arrow {
            border: 1px solid #fff;
            border-radius: 999px;
            width: 90px;
            height: 90px;
            position: absolute;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            -webkit-transform: translateY(-50%);
            z-index: 11;
            left: 0;
            right: 0;
            margin: 0 auto;
            opacity: 0;
            transition: all 0.6s cubic-bezier(0.52, 0.08, 0.18, 1);
            -webkit-transition: all 0.6s cubic-bezier(0.52, 0.08, 0.18, 1);
            backface-visibility: hidden;
            -webkit-backface-visibility: hidden; }
            #blog-container #blogmain #indexlist > li a .ph .arrow::before {
              content: "";
              background-color: #fff;
              margin-left: 2px;
              margin-top: 10px;
              width: 22px;
              height: 1px;
              position: absolute;
              top: 50%;
              transform: translateY(-50%);
              -webkit-transform: translateY(-50%);
              left: 0;
              right: 0;
              margin: 0 auto; }
            #blog-container #blogmain #indexlist > li a .ph .arrow::after {
              content: "";
              position: absolute;
              width: 8px;
              height: 8px;
              border-top: solid 1px #fff;
              border-right: solid 1px #fff;
              top: 50%;
              left: 0;
              right: -12px;
              margin: 0 auto;
              -webkit-transform: translateY(-50%) rotate(45deg);
              transform: translateY(-50%) rotate(45deg); }
        #blog-container #blogmain #indexlist > li a .info {
          display: -webkit-flex;
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-top: 20px; }
          #blog-container #blogmain #indexlist > li a .info .date {
            font-family: "Barlow Condensed", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "游ゴシック Medium", "Yu Gothic Medium", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro", "Meiryo", "メイリオ", Helvetica, sans-serif;
            font-size: 18px; }
          #blog-container #blogmain #indexlist > li a .info .author {
            white-space: nowrap;
            display: -webkit-flex;
            display: flex;
            align-items: center;
            justify-content: flex-end; }
            #blog-container #blogmain #indexlist > li a .info .author .authorimg {
              background-color: #eee;
              width: 45px;
              height: 45px;
              border-radius: 99px;
              overflow: hidden;
              margin-right: 12px; }
            #blog-container #blogmain #indexlist > li a .info .author .name {
              font-size: 14px;
              font-weight: bold; }
        #blog-container #blogmain #indexlist > li a .entrytitle {
          font-weight: bold;
          font-size: 20px;
          margin-top: 20px;
          line-height: 1.6; }
        #blog-container #blogmain #indexlist > li a .cat {
          letter-spacing: -.4em;
          line-height: 1;
          margin-top: 15px;
          white-space: nowrap; }
          #blog-container #blogmain #indexlist > li a .cat i {
            display: inline-block;
            color: #464343;
            width: 24px;
            font-size: 14px;
            vertical-align: top;
            margin-top: 5px; }
          #blog-container #blogmain #indexlist > li a .cat ul {
            display: inline-block;
            white-space: normal; }
            #blog-container #blogmain #indexlist > li a .cat ul li {
              display: inline-block;
              letter-spacing: 0.12em;
              padding: 0 8px;
              border-right: 1px solid #C8C8C8;
              font-size: 13px;
              margin: 5px 0;
              font-weight: bold; }
              #blog-container #blogmain #indexlist > li a .cat ul li:first-of-type {
                border-left: 1px solid #C8C8C8; }
        #blog-container #blogmain #indexlist > li a .excerpt {
          font-size: 14px;
          margin-top: 20px;
          color: #464343;
          word-break: break-all; }
  #blog-container #blogmain article.entry .titlearea {
    display: -webkit-flex;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    padding-bottom: 25px;
    margin-bottom: 60px;
    border-bottom: 1px solid #C8C8C8; }
    #blog-container #blogmain article.entry .titlearea .text {
      flex: 1; }
      #blog-container #blogmain article.entry .titlearea .text .date {
        font-family: "Barlow Condensed", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "游ゴシック Medium", "Yu Gothic Medium", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro", "Meiryo", "メイリオ", Helvetica, sans-serif;
        font-size: 19px;
        font-weight: 400;
        margin-bottom: 15px;
        line-height: 1; }
      #blog-container #blogmain article.entry .titlearea .text .entrytitle {
        font-size: 26px;
        font-weight: bold;
        line-height: 1.6; }
    #blog-container #blogmain article.entry .titlearea .author {
      min-width: 220px;
      white-space: nowrap; }
      #blog-container #blogmain article.entry .titlearea .author a {
        display: -webkit-flex;
        display: flex;
        align-items: center;
        justify-content: flex-end; }
        #blog-container #blogmain article.entry .titlearea .author a .ph {
          background-color: #eee;
          width: 60px;
          height: 60px;
          border-radius: 99px;
          overflow: hidden;
          margin-right: 15px; }
        #blog-container #blogmain article.entry .titlearea .author a .name {
          font-size: 15px;
          font-weight: bold; }
  #blog-container #blogmain article.entry .postbody .outline {
    width: 90%;
    border: 2px solid #002f68;
    background: #f6f6f6;
    padding: 5px 20px;
    margin: 30px auto; }
    #blog-container #blogmain article.entry .postbody .outline ul {
      width: fit-content;
      margin: 0 auto;
      line-height: 1.5em;
      font-weight: bold;
      font-size: clamp(16px, 4vw, 18px);
      text-align: left; }
      #blog-container #blogmain article.entry .postbody .outline ul li a {
        text-decoration: none;
        color: #002f68; }
  #blog-container #blogmain article.entry .postbody #area01, #blog-container #blogmain article.entry .postbody #area02, #blog-container #blogmain article.entry .postbody #area03, #blog-container #blogmain article.entry .postbody #area04 {
    margin-top: -30px;
    padding-top: 30px; }
  #blog-container #blogmain article.entry .postbody img.objectfit {
    width: 100%;
    height: 100%; }
  #blog-container #blogmain article.entry .postbody img.alignleft {
    float: none;
    margin-right: 40px;
    margin-bottom: 1em; }
  #blog-container #blogmain article.entry .postbody img.alignright {
    float: none;
    margin-left: 40px;
    margin-bottom: 1em; }
  #blog-container #blogmain article.entry .postbody img.aligncenter {
    display: block;
    text-align: center;
    margin-left: auto;
    margin-right: auto; }
  #blog-container #blogmain article.entry .postbody .categoryarea {
    margin: -15px 0 40px; }
    #blog-container #blogmain article.entry .postbody .categoryarea .post-categories li {
      display: inline-block;
      margin: 0 5px 10px 0;
      padding: 0;
      text-indent: 0; }
      #blog-container #blogmain article.entry .postbody .categoryarea .post-categories li::before {
        display: none; }
      #blog-container #blogmain article.entry .postbody .categoryarea .post-categories li a {
        display: block;
        background-color: #464343;
        color: #fff;
        font-size: 14px;
        padding: 2px 20px;
        min-width: 130px;
        box-sizing: border-box;
        text-align: center;
        text-decoration: none; }
        #blog-container #blogmain article.entry .postbody .categoryarea .post-categories li a:hover {
          opacity: .6; }
  #blog-container #blogmain article.entry .postbody .bloginfo {
    border: 1px solid #C8C8C8;
    padding: 40px;
    margin-top: 60px;
    clear: both; }
    #blog-container #blogmain article.entry .postbody .bloginfo a {
      text-decoration: none; }
      #blog-container #blogmain article.entry .postbody .bloginfo a:hover {
        opacity: .7; }
    #blog-container #blogmain article.entry .postbody .bloginfo .infotitle {
      display: -webkit-flex;
      display: flex;
      align-items: center;
      font-size: 21px;
      font-weight: bold;
      margin-bottom: 30px; }
      #blog-container #blogmain article.entry .postbody .bloginfo .infotitle img {
        width: 37px;
        margin-right: 11px; }
    #blog-container #blogmain article.entry .postbody .bloginfo .authorbox {
      display: -webkit-flex;
      display: flex;
      justify-content: center;
      align-items: center; }
      #blog-container #blogmain article.entry .postbody .bloginfo .authorbox figure {
        width: 130px;
        height: 130px;
        background-color: #eee;
        border-radius: 999px;
        overflow: hidden;
        margin-right: 30px; }
      #blog-container #blogmain article.entry .postbody .bloginfo .authorbox .text {
        flex: 1; }
        #blog-container #blogmain article.entry .postbody .bloginfo .authorbox .text .name {
          font-weight: bold;
          font-size: 18px; }
        #blog-container #blogmain article.entry .postbody .bloginfo .authorbox .text .comment {
          margin-top: 0;
          font-size: 15px; }
    #blog-container #blogmain article.entry .postbody .bloginfo .recentlybox {
      margin-top: 50px; }
      #blog-container #blogmain article.entry .postbody .bloginfo .recentlybox .recentlytitle {
        font-weight: bold;
        font-size: 18px;
        text-align: center;
        margin-bottom: 30px; }
      #blog-container #blogmain article.entry .postbody .bloginfo .recentlybox .recently_inner {
        display: -webkit-flex;
        display: flex;
        margin: 0 -1.5%; }
        #blog-container #blogmain article.entry .postbody .bloginfo .recentlybox .recently_inner .recently_item {
          width: 25%;
          box-sizing: border-box;
          padding: 0 1.5%; }
          #blog-container #blogmain article.entry .postbody .bloginfo .recentlybox .recently_inner .recently_item a {
            display: block; }
            #blog-container #blogmain article.entry .postbody .bloginfo .recentlybox .recently_inner .recently_item a .imagearea figure {
              height: 0;
              position: relative;
              padding-top: 66%; }
              #blog-container #blogmain article.entry .postbody .bloginfo .recentlybox .recently_inner .recently_item a .imagearea figure img {
                position: absolute;
                left: 0;
                top: 0; }
            #blog-container #blogmain article.entry .postbody .bloginfo .recentlybox .recently_inner .recently_item a .textarea {
              margin-top: 10px; }
              #blog-container #blogmain article.entry .postbody .bloginfo .recentlybox .recently_inner .recently_item a .textarea .date {
                font-size: 14px;
                font-family: "Barlow Condensed", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "游ゴシック Medium", "Yu Gothic Medium", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro", "Meiryo", "メイリオ", Helvetica, sans-serif; }
              #blog-container #blogmain article.entry .postbody .bloginfo .recentlybox .recently_inner .recently_item a .textarea .entrytitle {
                font-size: 13px;
                font-weight: bold;
                margin: 3px 0 0;
                line-height: 1.6; }
      #blog-container #blogmain article.entry .postbody .bloginfo .recentlybox .no-entry {
        text-align: center;
        font-size: 15px; }
#blog-container #blogside {
  float: left;
  width: 20%; }
  #blog-container #blogside dl {
    margin-bottom: 60px; }
    #blog-container #blogside dl dt {
      font-weight: bold;
      font-size: 17px;
      margin-bottom: 30px;
      padding-bottom: 20px;
      line-height: 1;
      border-bottom: 1px dashed #C8C8C8; }
    #blog-container #blogside dl dd ul li a:hover {
      opacity: .6; }
  #blog-container #blogside .side_category ul li a {
    display: block;
    position: relative;
    padding-left: 12px;
    font-size: 14px;
    margin-bottom: 12px;
    line-height: 1.6; }
    #blog-container #blogside .side_category ul li a::before {
      content: "";
      background-color: #464343;
      width: 6px;
      height: 6px;
      border-radius: 99px;
      position: absolute;
      left: 0;
      top: 8px; }
  #blog-container #blogside .side_author ul li {
    margin-bottom: 15px; }
    #blog-container #blogside .side_author ul li a {
      display: -webkit-flex;
      display: flex;
      align-items: center; }
      #blog-container #blogside .side_author ul li a figure {
        width: 30px;
        height: 30px;
        border-radius: 99px;
        overflow: hidden;
        margin-right: 10px;
        background-color: #eee; }
      #blog-container #blogside .side_author ul li a .name {
        font-size: 14px;
        flex: 1; }
  #blog-container #blogside select {
    width: 100%;
    font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "游ゴシック Medium", "Yu Gothic Medium", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro", "Meiryo", "メイリオ", Helvetica, sans-serif;
    padding: 5px;
    border: 1px solid #C8C8C8;
    min-height: 41px; }

.cattitle {
  font-weight: bold;
  font-size: 18px;
  text-align: center;
  border-bottom: 1px solid #C8C8C8;
  border-top: 1px solid #C8C8C8;
  padding: 13px;
  margin-bottom: 50px; }

#pagenav ul {
  border-top-style: dashed;
  border-bottom-style: dashed; }

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

 Responsive-Breakpoint-1 (1400px)
 
------------------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------------------

 Responsive-Breakpoint-2 ( 960px )
 
------------------------------------------------------------------------------------------------------------------------ */
@media only screen and (max-width: 959px) {
  #blog-container #blogmain {
    float: none;
    width: auto; }
    #blog-container #blogmain #indexlist {
      display: block; }
      #blog-container #blogmain #indexlist > li {
        width: auto;
        padding-bottom: 60px; }
        #blog-container #blogmain #indexlist > li:last-child {
          padding-bottom: 0; }
    #blog-container #blogmain article.entry .titlearea .text .date {
      font-size: 17px;
      margin-bottom: 10px; }
    #blog-container #blogmain article.entry .titlearea .text .entrytitle {
      font-size: 21px; }
    #blog-container #blogmain article.entry .titlearea .author {
      min-width: 160px;
      margin: 0 0 0 5px; }
      #blog-container #blogmain article.entry .titlearea .author a .ph {
        width: 50px;
        height: 50px; }
      #blog-container #blogmain article.entry .titlearea .author a .name {
        font-size: 14px;
        letter-spacing: 0.05em; }
    #blog-container #blogmain article.entry .postbody .bloginfo {
      padding: 30px; }
      #blog-container #blogmain article.entry .postbody .bloginfo .infotitle {
        margin-bottom: 25px; }
      #blog-container #blogmain article.entry .postbody .bloginfo .authorbox {
        align-items: flex-start; }
        #blog-container #blogmain article.entry .postbody .bloginfo .authorbox figure {
          width: 100px;
          height: 100px;
          margin-right: 25px; }
        #blog-container #blogmain article.entry .postbody .bloginfo .authorbox .text .name {
          font-size: 17px; }
        #blog-container #blogmain article.entry .postbody .bloginfo .authorbox .text .comment {
          font-size: 14px; }
      #blog-container #blogmain article.entry .postbody .bloginfo .recentlybox {
        margin-top: 35px; }
        #blog-container #blogmain article.entry .postbody .bloginfo .recentlybox .recentlybox {
          margin-bottom: 25px; }
  #blog-container #blogside {
    float: none;
    width: auto;
    margin-top: 60px; }
    #blog-container #blogside dl dd ul {
      letter-spacing: -.4em; }
      #blog-container #blogside dl dd ul li {
        letter-spacing: 0.13em;
        display: inline-block;
        vertical-align: top;
        width: 50%;
        box-sizing: border-box;
        padding-right: 5px; }

  .cattitle {
    font-size: 17px;
    opacity: 13px;
    margin-bottom: 40px; } }
/* ------------------------------------------------------------------------------------------------------------------------

 Responsive-Breakpoint-3 ( 644px )
 
------------------------------------------------------------------------------------------------------------------------ */
@media only screen and (max-width: 644px) {
  #blog-container #blogmain #indexlist > li {
    padding-bottom: 50px; }
    #blog-container #blogmain #indexlist > li a .info .author .name {
      font-size: 12px; }
    #blog-container #blogmain #indexlist > li a .info .author .authorimg {
      width: 40px;
      height: 40px; }
    #blog-container #blogmain #indexlist > li a .entrytitle {
      font-size: 19px; }
  #blog-container #blogmain article.entry .titlearea {
    margin-bottom: 40px; }
    #blog-container #blogmain article.entry .titlearea .text .entrytitle {
      font-size: 19px; }
    #blog-container #blogmain article.entry .titlearea .author {
      min-width: auto; }
      #blog-container #blogmain article.entry .titlearea .author a {
        display: block; }
        #blog-container #blogmain article.entry .titlearea .author a .ph {
          margin: 0 auto 5px; }
        #blog-container #blogmain article.entry .titlearea .author a .name {
          font-size: 13px; }
  #blog-container #blogmain article.entry .postbody #area01, #blog-container #blogmain article.entry .postbody #area02, #blog-container #blogmain article.entry .postbody #area03, #blog-container #blogmain article.entry .postbody #area04 {
    margin-top: -40px;
    padding-top: 40px; }
  #blog-container #blogmain article.entry .postbody .categoryarea p a {
    font-size: 13px;
    padding: 2px 15px;
    min-width: 120px; }
  #blog-container #blogmain article.entry .postbody .bloginfo {
    margin-top: 40px;
    padding: 25px 20px 20px; }
    #blog-container #blogmain article.entry .postbody .bloginfo .infotitle {
      font-size: 18px; }
      #blog-container #blogmain article.entry .postbody .bloginfo .infotitle img {
        width: 28px;
        margin-right: 8px; }
    #blog-container #blogmain article.entry .postbody .bloginfo .authorbox figure {
      width: 70px;
      height: 70px;
      margin-right: 15px; }
    #blog-container #blogmain article.entry .postbody .bloginfo .authorbox .text .name {
      font-size: 16px; }
    #blog-container #blogmain article.entry .postbody .bloginfo .authorbox .text .comment {
      font-size: 13px;
      margin-top: 5px; }
    #blog-container #blogmain article.entry .postbody .bloginfo .recentlybox {
      margin-top: 30px; }
      #blog-container #blogmain article.entry .postbody .bloginfo .recentlybox .recentlytitle {
        font-size: 16px;
        margin-bottom: 20px; }
      #blog-container #blogmain article.entry .postbody .bloginfo .recentlybox .recently_inner {
        flex-wrap: wrap;
        margin: 0 -2.5%; }
        #blog-container #blogmain article.entry .postbody .bloginfo .recentlybox .recently_inner .recently_item {
          flex: auto;
          padding: 0 2.5% 25px;
          width: 50%;
          box-sizing: border-box; }
          #blog-container #blogmain article.entry .postbody .bloginfo .recentlybox .recently_inner .recently_item:nth-child(3), #blog-container #blogmain article.entry .postbody .bloginfo .recentlybox .recently_inner .recently_item:nth-child(4) {
            padding-bottom: 0; }
          #blog-container #blogmain article.entry .postbody .bloginfo .recentlybox .recently_inner .recently_item a .textarea .entrytitle {
            margin: 0; }
  #blog-container #blogside {
    margin-top: 50px; }
    #blog-container #blogside dl dd ul li {
      width: auto;
      display: block;
      padding-right: 0; }

  .cattitle {
    font-size: 16px;
    margin-bottom: 30px; } }