@charset "UTF-8";
@import url("global.css");
.selectarea {
  margin-top: 60px;
  margin-bottom: -100px;
  background-color: #f6f6f6;
  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 + dl {
  border-left: 1px solid #d8d8d8;
}
.selectarea dl dt {
  line-height: 1;
}
.selectarea dl dd {
  padding: 25px 0 25px 15px;
}
.selectarea dl dd form select {
  font-family: YakuHanJPs, "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: #d8d8d8 1px solid;
  background-color: #fff;
  border-radius: 2px;
  padding: 15px;
  width: 100%;
  box-sizing: border-box;
  vertical-align: middle;
  box-shadow: none;
  letter-spacing: 1px;
}

/* ------------------------------
 Index-Page
------------------------------ */
ul.list {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -25px;
}
ul.list li {
  width: 33.3333333333%;
  box-sizing: border-box;
  padding: 0 25px;
  margin-bottom: 60px;
}
ul.list li a {
  display: block;
  position: relative;
}
ul.list li a:hover .image::before {
  opacity: .8;
}
ul.list li a:hover .image::after {
  opacity: 1;
  transform: none;
}
ul.list li .image {
  position: relative;
  height: 0;
  padding-top: 70%;
  z-index: 0;
}
ul.list li .image img {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  border-radius: 3px;
}
ul.list li .image::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
  opacity: 0;
  transition: all 0.4s cubic-bezier(0.04, 0.435, 0.315, 0.9) 0s;
  -webkit-transition: all 0.4s cubic-bezier(0.04, 0.435, 0.315, 0.9) 0s;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
ul.list li .image::after {
  content: "記事を読む";
  font-family: YakuHanMPs, "Zen Old Mincho", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  font-weight: 700;
  color: #F9A821;
  border: #F9A821 1px solid;
  line-height: 44px;
  width: 140px;
  text-align: center;
  background-color: rgba(255, 255, 255, 0.5);
  box-sizing: border-box;
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  margin: -23px 0 0 -70px;
  transition: all 0.5s cubic-bezier(0.04, 0.435, 0.315, 0.9) 0s;
  -webkit-transition: all 0.5s cubic-bezier(0.04, 0.435, 0.315, 0.9) 0s;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  opacity: 0;
  transform: translateY(30px);
}
ul.list li .author {
  width: 68px;
  height: 68px;
  position: absolute;
  margin-top: -34px;
  right: -10px;
  border-radius: 50%;
  overflow: hidden;
  background-color: #f6f6f6;
  z-index: 2;
}
ul.list li .postdate {
  font-size: 14px;
  color: #675252;
  margin: 10px 0 8px;
}
ul.list li .posttitle {
  font-size: 18px;
  font-weight: 700;
  font-family: YakuHanMPs, "Zen Old Mincho", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  margin-bottom: 14px;
  line-height: 1.5;
}
ul.list li .text {
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.5;
}
ul.list li .postcat {
  font-size: 14px;
  margin-top: 12px;
  letter-spacing: -.4em;
}
ul.list li .postcat span {
  display: inline-block;
  letter-spacing: 0;
  margin-right: 15px;
}
ul.list li .postcat span::before {
  content: "#";
  padding-right: 3px;
}

.cattitle {
  margin-bottom: 60px;
  font-size: 18px;
  letter-spacing: .1em;
}
.cattitle span {
  display: inline-block;
  padding-right: 10px;
  font-size: 28px;
  font-family: YakuHanMPs, "Zen Old Mincho", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}
.cattitle span::before, .cattitle span::after {
  display: inline-block;
  color: #F9A821;
}
.cattitle span::before {
  content: "「";
  padding-right: 5px;
}
.cattitle span::after {
  content: "」";
  padding-left: 5px;
}

/* ------------------------------
 Post-Page
------------------------------ */
#post .posttitle {
  font-size: 26px;
  font-weight: 700;
  font-family: YakuHanMPs, "Zen Old Mincho", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  line-height: 1.5;
  margin-bottom: 40px;
}
#post .postdata {
  display: flex;
  width: 100%;
}
#post .postdata .date {
  color: #675252;
}
#post .postdata .date::after {
  content: "";
  width: 40px;
  height: 1px;
  background-color: #A1A09E;
  display: inline-block;
  margin: 0 20px;
  vertical-align: 5px;
}
#post .postdata ul.cat {
  display: flex;
  flex-wrap: wrap;
}
#post .postdata ul.cat li {
  margin: 0 10px 10px 0;
}
#post .postdata ul.cat li a {
  display: block;
  padding: 1px 15px 3px;
  background-color: #f6f6f6;
  border-radius: 3px;
  font-size: 14px;
}
#post .postdata ul.cat li a::before {
  content: "#";
  padding-right: 3px;
}
#post #postbody {
  margin: 80px 0 100px;
}

.auth_info {
  background-color: #f6f6f6;
  margin: 40px 0;
  padding: 60px 0;
}
.auth_info .auth_main {
  border-radius: 3px;
  background-color: #fff;
  padding: 30px 35px;
  display: flex;
}
.auth_info .auth_main .prof_area {
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: left;
}
.auth_info .auth_main .prof_area figure {
  flex-shrink: 0;
  width: 140px;
  height: 140px;
  border-radius: 100%;
  overflow: hidden;
  background-color: #f6f6f6;
}
.auth_info .auth_main .prof_area .text {
  padding-left: 20px;
  line-height: 1;
}
.auth_info .auth_main .prof_area .text .auth_title {
  font-size: 14px;
  font-family: YakuHanMPs, "Zen Old Mincho", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}
.auth_info .auth_main .prof_area .text .auth_name {
  margin: 10px 0 20px;
  font-size: 18px;
  white-space: nowrap;
}
.auth_info .auth_main .prof_area .text .auth_link a {
  display: inline-block;
  font-size: 14px;
  background-color: #F9A821;
  color: #fff;
  border-radius: 100px;
  padding: 6px 30px 8px;
}
.auth_info .auth_main .list {
  padding-left: 35px;
  border-left: 1px dotted #d8d8d8;
  margin-left: 35px;
  width: 100%;
  box-sizing: border-box;
}
.auth_info .auth_main .list ul {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -15px;
}
.auth_info .auth_main .list ul li {
  width: 33.3333333333%;
  padding: 0 15px;
  box-sizing: border-box;
}
.auth_info .auth_main .list ul li a {
  display: block;
}
.auth_info .auth_main .list ul li a figure {
  aspect-ratio: 3 / 2;
  overflow: hidden;
  position: relative;
}
.auth_info .auth_main .list ul li a .text {
  font-size: 14px;
}
.auth_info .auth_main .list ul li a .text span {
  display: block;
  margin: 6px 0 2px;
  color: #675252;
}
.auth_info .auth_main .list ul li a .text p {
  text-align: justify;
  line-height: 1.5;
  letter-spacing: 0;
}
.auth_info .auth_main .list ul li a:hover {
  opacity: .7;
}

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

 Responsive-Breakpoint (1680px)
 
------------------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------------------

 Responsive-Breakpoint (1500px)
 
------------------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------------------

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

  /* ------------------------------
   Index-Page
  ------------------------------ */
  ul.list {
    margin: 0 -1.8vw;
  }
  ul.list li {
    padding: 0 1.8vw;
  }

  /* ------------------------------
   Post-Page
  ------------------------------ */
  .auth_info .wrapper {
    padding-left: 50px !important;
  }
  .auth_info .auth_main {
    display: block;
  }
  .auth_info .auth_main .prof_area {
    margin-bottom: 20px;
  }
  .auth_info .auth_main .prof_area .text {
    padding-left: 30px;
  }
  .auth_info .auth_main .list {
    padding: 20px 0 0;
    border-left: none;
    border-top: #d8d8d8 1px dashed;
    margin: 0;
    width: auto;
  }
  .auth_info .auth_main .list ul {
    margin: 0 -1.5vw;
  }
  .auth_info .auth_main .list ul li {
    padding: 0 1.5vw;
  }
}
/* ------------------------------------------------------------------------------------------------------------------------

 Responsive-Breakpoint-2 ( 960px )
 
------------------------------------------------------------------------------------------------------------------------ */
@media only screen and (max-width: 959px) {
  .selectarea {
    margin-top: 40px;
    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-Page
  ------------------------------ */
  ul.list {
    margin: 0 -2.2vw;
  }
  ul.list li {
    width: 50%;
    padding: 0 2.2vw;
  }
  ul.list li .image::before, ul.list li .image::after {
    display: none;
  }
  ul.list li .author {
    width: 60px;
    height: 60px;
    margin-top: -30px;
  }

  /* ------------------------------
   Post-Page
  ------------------------------ */
  #post .posttitle {
    font-size: 24px;
  }
  #post .postdata .date::after {
    width: 20px;
    margin: 0 15px;
  }
  #post #postbody {
    margin: 60px 0 80px;
  }

  .auth_info {
    padding: 40px 0;
  }
  .auth_info .wrapper {
    padding-left: 6vw !important;
  }
  .auth_info .auth_main {
    padding: 30px 30px 35px;
  }
  .auth_info .auth_main .list ul li a:hover {
    opacity: 1;
  }
  .auth_info .auth_main .prof_area .text .auth_link a:hover {
    background-color: #d8d8d8;
    color: #3B3B3B;
  }
}
/* ------------------------------------------------------------------------------------------------------------------------

 Responsive-Breakpoint-3 ( 644px )
 
------------------------------------------------------------------------------------------------------------------------ */
@media only screen and (max-width: 644px) {
  .selectarea {
    margin: 30px 0 -55px;
    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-Page
  ------------------------------ */
  ul.list li {
    margin-bottom: 40px;
  }
  ul.list li .author {
    width: 48px;
    height: 48px;
    margin-top: -24px;
    right: -6px;
  }
  ul.list li .postdate {
    font-size: 13px;
    margin: 5px 0 5px;
  }
  ul.list li .posttitle {
    font-size: 15px;
    margin-bottom: 12px;
  }
  ul.list li .text {
    font-size: 12px;
    line-height: 1.4;
  }
  ul.list li .postcat {
    font-size: 12px;
    margin-top: 8px;
  }
  ul.list li .postcat span {
    margin-right: 10px;
  }

  /* ------------------------------
   Post-Page
  ------------------------------ */
  #post .posttitle {
    text-align: center;
    font-size: 20px;
    padding-top: 10px;
    margin-bottom: 20px;
  }
  #post .postdata {
    display: block;
    text-align: center;
  }
  #post .postdata .date {
    margin-bottom: 20px;
    color: #675252;
  }
  #post .postdata .date::before, #post .postdata .date::after {
    content: "";
    width: 20px;
    height: 1px;
    background-color: #A1A09E;
    display: inline-block;
    margin: 0 15px;
    vertical-align: 5px;
  }
  #post .postdata ul.cat {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
  #post .postdata ul.cat li {
    margin: 0 4px 10px;
  }
  #post .postdata ul.cat li a {
    padding: 5px 15px 8px;
    font-size: 13px;
    letter-spacing: 0;
  }
  #post #postbody {
    margin: 40px 0 60px;
  }

  .auth_info {
    padding: 30px 0;
    margin-bottom: 30px;
  }
  .auth_info .wrapper {
    padding-left: 5vw !important;
  }
  .auth_info .auth_main {
    background-color: transparent;
    padding: 0;
  }
  .auth_info .auth_main .prof_area figure {
    width: 110px;
    height: 110px;
  }
  .auth_info .auth_main .prof_area .text {
    padding-left: 20px;
  }
  .auth_info .auth_main .prof_area .text .auth_title {
    font-size: inherit;
  }
  .auth_info .auth_main .prof_area .text .auth_name {
    font-size: 16px;
  }
  .auth_info .auth_main .list {
    border-left: none;
  }
  .auth_info .auth_main .list ul li a .text {
    font-size: 12px;
  }
  .auth_info .auth_main .list ul li a .text span {
    margin: 5px 0 2px;
  }
  .auth_info .auth_main .list ul li a .text p {
    line-height: 1.4;
  }
}

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