@charset "UTF-8";
@import url("global.css");
.selectarea {
  margin-top: 60px;
  margin-bottom: -20px;
  background-color: #f3f3f3;
  width: 100%;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.selectarea dl {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 0 40px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
.selectarea dl + dl {
  border-left: 1px solid #e7e7e7;
}
.selectarea dl dt {
  line-height: 1;
}
.selectarea dl dd {
  padding: 25px 0 25px 15px;
}
.selectarea dl dd form select {
  font-family: "Zen Kaku Gothic Antique", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "游ゴシック Medium", "Yu Gothic Medium", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro", "Meiryo", "メイリオ", Helvetica, sans-serif;
  border: #e7e7e7 1px solid;
  background-color: #fff;
  border-radius: 2px;
  padding: 15px;
  width: 100%;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  vertical-align: middle;
  -webkit-box-shadow: none;
          box-shadow: none;
  letter-spacing: 1px;
}

/* ------------------------------
 Index
------------------------------ */
.list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  padding: 0 2vw;
  text-align: left;
}
.list li {
  -ms-flex-preferred-size: 25%;
      flex-basis: 25%;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding: 0 1vw;
  margin-bottom: 60px;
}
.list li a {
  display: block;
  height: 100%;
}
.list li a:hover .image img {
  -webkit-filter: blur(3px);
          filter: blur(3px);
}
.list li a:hover .image::before {
  opacity: 1;
}
.list li a:hover .image::after {
  opacity: 1;
  -webkit-transform: none;
          transform: none;
}
.list li a .image {
  position: relative;
  height: 0;
  padding-top: 66.7%;
  z-index: 0;
  overflow: hidden;
  background-color: #f3f3f3;
}
.list li a .image img {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  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;
}
.list li a .image::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(45, 45, 45, 0.8);
  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;
}
.list li a .image::after {
  content: "記事を読む »";
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  color: #fff;
  z-index: 2;
  font-size: 18px;
  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;
  -webkit-transform: translateX(-20px);
          transform: translateX(-20px);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.list li a .main {
  padding: 10px 10px 0;
  position: relative;
}
.list li a .staff {
  width: 56px;
  height: 56px;
  border: #fff 2px solid;
  border-radius: 50%;
  background-color: #fff;
  position: absolute;
  top: -24px;
  right: 5px;
  z-index: 1;
  overflow: hidden;
}
.list li a .date {
  font-family: "EB Garamond", "Zen Old Mincho", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  font-weight: 600;
}
.list li a .title {
  line-height: 1.5;
  font-family: "Zen Old Mincho", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  font-weight: 500;
}
.list li a .text {
  font-size: 14px;
  line-height: 1.5;
  margin: 15px 0;
}
.list li a .cat span {
  display: inline-block;
  margin-right: 8px;
  border: #8f8f8f 1px solid;
  border-radius: 2px;
  font-size: 12px;
  padding: 0 8px;
  letter-spacing: 0;
}

.cat-title {
  font-size: 18px;
  margin: -20px 0 70px;
  letter-spacing: 0.1em;
}
.cat-title span {
  font-family: "Zen Old Mincho", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  font-weight: 500;
  font-size: 1.5em;
  padding-right: 8px;
}
.cat-title::before, .cat-title::after {
  content: "";
  width: 50px;
  height: 1px;
  background-color: #8f8f8f;
  display: inline-block;
  margin: 0 20px;
  vertical-align: 8px;
}

/* ------------------------------
 Post-Page
------------------------------ */
.post-page .post-title {
  text-align: center;
  margin-bottom: 80px;
}
.post-page .post-title .date {
  font-family: "EB Garamond", "Zen Old Mincho", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  margin-bottom: 5px;
}
.post-page .post-title .h {
  line-height: 1.5;
  font-family: "Zen Old Mincho", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  font-weight: 500;
  font-size: 28px;
}
.post-page .post-title .cat {
  margin-top: 20px;
}
.post-page .post-title .cat span {
  display: inline-block;
  margin: 0 5px 10px;
}
.post-page .post-title .cat span a {
  display: block;
  padding: 4px 15px;
  background-color: #EEEBE5;
  font-size: 14px;
  border-radius: 2px;
}
.post-page .auth_info {
  margin: 80px 0 60px;
}
.post-page .auth_info .auth_main {
  background-color: #f3f3f3;
  padding: 40px 35px;
  border-radius: 3px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
.post-page .auth_info .auth_main .prof_area {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 350px;
  margin-right: 50px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  text-align: left;
}
.post-page .auth_info .auth_main .prof_area figure {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 130px;
  height: 130px;
  background-color: #FFF;
  border-radius: 50%;
  overflow: hidden;
}
.post-page .auth_info .auth_main .prof_area .text {
  padding-left: 20px;
  line-height: 1;
}
.post-page .auth_info .auth_main .prof_area .text .auth_title {
  font-size: 14px;
}
.post-page .auth_info .auth_main .prof_area .text .auth_name {
  margin: 10px 0 20px;
  font-size: 17px;
  font-weight: 700;
  white-space: nowrap;
}
.post-page .auth_info .auth_main .prof_area .text .auth_link {
  margin-left: -10px;
}
.post-page .auth_info .auth_main .prof_area .text .auth_link a {
  display: inline-block;
  font-size: 14px;
  background-color: #fff;
  border: #8f8f8f 1px solid;
  padding: 6px 15px 8px 10px;
  border-radius: 3px;
  line-height: 1.5;
  text-align: center;
  letter-spacing: 0;
}
.post-page .auth_info .auth_main .prof_area .text .auth_link a br {
  display: none;
}
.post-page .auth_info .auth_main .prof_area .text .auth_link a::after {
  content: "→";
  padding-left: 3px;
}
.post-page .auth_info .auth_main .prof_area .comment {
  margin-top: 20px;
  width: 100%;
  font-size: 14px;
  letter-spacing: 0;
  line-height: 1.6;
  text-align: justify;
}
.post-page .auth_info .auth_main .posts {
  width: 100%;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
.post-page .auth_info .auth_main .posts ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin: 0 -10px;
}
.post-page .auth_info .auth_main .posts ul li {
  width: 33.3333333333%;
  padding: 0 10px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
.post-page .auth_info .auth_main .posts ul li a {
  display: block;
}
.post-page .auth_info .auth_main .posts ul li a:hover {
  opacity: 0.7;
}
.post-page .auth_info .auth_main .posts ul li a .image {
  position: relative;
}
.post-page .auth_info .auth_main .posts ul li a .image figure {
  height: 0;
  padding-top: 66.67%;
  position: relative;
  overflow: hidden;
}
.post-page .auth_info .auth_main .posts ul li a .image figure img {
  position: absolute;
  left: 0;
  top: 0;
}
.post-page .auth_info .auth_main .posts ul li a .date {
  line-height: 1;
  font-size: 14px;
  font-family: "EB Garamond", "Zen Old Mincho", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  margin: 12px 0 6px;
}
.post-page .auth_info .auth_main .posts ul li a .title {
  line-height: 1.5;
  font-size: 15px;
  font-weight: 700;
}

/* --- video挿入時の設定 ---*/
.wp-video {
  width: 400px !important;
  height: auto !important;
}
.wp-video video {
  width: 100% !important;
  height: 100% !important;
}

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

 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
  ------------------------------ */
  .list li {
    -ms-flex-preferred-size: 33.3333333333%;
        flex-basis: 33.3333333333%;
    padding: 0 1.5vw;
  }
  .list li a .text {
    font-size: 13px;
  }
  .cat-title {
    margin: -10px 0 60px;
  }
  /* ------------------------------
   Post-Page
  ------------------------------ */
  .post-page .auth_info .auth_main .prof_area {
    width: 280px;
    margin-right: 4.5vw;
  }
  .post-page .auth_info .auth_main .prof_area .text .auth_link a {
    padding: 8px 12px 10px 12px;
  }
  .post-page .auth_info .auth_main .prof_area .text .auth_link a br {
    display: inline;
  }
}
/* ------------------------------------------------------------------------------------------------------------------------

 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: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding: 7px 20px;
  }
  .selectarea dl + dl {
    border-left: none;
  }
  .selectarea dl dt {
    text-align: right;
    width: 140px;
    -ms-flex-negative: 0;
        flex-shrink: 0;
  }
  .selectarea dl dd {
    width: 100%;
    padding: 0 0 0 15px;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
  }
  /* ------------------------------
   Index
  ------------------------------ */
  .list {
    padding: 0 4vw;
  }
  .list li {
    -ms-flex-preferred-size: 50%;
        flex-basis: 50%;
    padding: 0 2vw;
  }
  .list li a:hover .image img {
    -webkit-filter: none;
            filter: none;
  }
  .list li a .image::before, .list li a .image::after {
    display: none;
  }
  .cat-title {
    font-size: 17px;
    margin: 0 0 50px;
  }
  /* ------------------------------
   Post-Page
  ------------------------------ */
  .post-page .post-title {
    margin-bottom: 60px;
  }
  .post-page .post-title .h {
    font-size: 24px;
  }
  .post-page .post-title .cat {
    margin-top: 30px;
  }
  .post-page .auth_info {
    margin: 60px 0 40px;
  }
  .post-page .auth_info .auth_main {
    display: block;
  }
  .post-page .auth_info .auth_main .prof_area {
    width: auto;
    margin: 0 0 30px;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
  .post-page .auth_info .auth_main .prof_area .text .auth_link a {
    padding: 6px 15px 8px 10px;
  }
  .post-page .auth_info .auth_main .prof_area .text .auth_link a br {
    display: none;
  }
  .post-page .auth_info .auth_main .prof_area .comment {
    text-align: center;
  }
  .post-page .auth_info .auth_main .prof_area .comment p {
    text-align: justify;
  }
  .post-page .auth_info .auth_main .posts ul {
    margin: 0 -2vw;
  }
  .post-page .auth_info .auth_main .posts ul li {
    padding: 0 2vw;
  }
  .post-page .auth_info .auth_main .posts ul li a .title {
    font-size: 14px;
  }
}
/* ------------------------------------------------------------------------------------------------------------------------

 Responsive-Breakpoint-3 ( 644px )

------------------------------------------------------------------------------------------------------------------------ */
@media only screen and (max-width: 644px) {
  .selectarea {
    margin: 30px 0 -20px;
    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
  ------------------------------ */
  .list {
    padding: 0 2vw;
    margin-bottom: -60px;
  }
  .list li {
    padding: 0 2vw;
    margin-bottom: 50px;
  }
  .list li a .main {
    padding: 6px 1vw 0;
  }
  .list li a .staff {
    width: 44px;
    height: 44px;
    top: -20px;
  }
  .list li a .title {
    letter-spacing: 0;
  }
  .list li a .text {
    font-size: 11px;
    letter-spacing: 0;
    margin: 10px 0;
  }
  .list li a .cat span {
    margin-right: 5px;
    font-size: 9px;
    padding: 0 5px;
  }
  .cat-title {
    font-size: 15px;
    margin: 0 0 40px;
  }
  .cat-title span {
    font-size: 1.4em;
    padding-right: 5px;
  }
  .cat-title::before, .cat-title::after {
    width: 30px;
    margin: 0 12px;
    vertical-align: 6px;
  }
  /* ------------------------------
   Post-Page
  ------------------------------ */
  .post-page .post-title {
    margin-bottom: 40px;
  }
  .post-page .post-title .h {
    font-size: min(24px,5vw);
  }
  .post-page .post-title .cat {
    margin-top: 25px;
  }
  .post-page .post-title .cat span {
    margin: 0 4px 8px;
  }
  .post-page .post-title .cat span a {
    font-size: 12px;
  }
  .post-page .auth_info {
    margin: 60px 0 40px;
  }
  .post-page .auth_info .auth_main {
    padding: 40px 5.5vw;
  }
  .post-page .auth_info .auth_main .prof_area {
    margin: 0 0 20px;
  }
  .post-page .auth_info .auth_main .prof_area figure {
    width: 90px;
    height: 90px;
  }
  .post-page .auth_info .auth_main .prof_area .text {
    padding-left: 20px;
  }
  .post-page .auth_info .auth_main .prof_area .text .auth_title {
    font-size: 13px;
  }
  .post-page .auth_info .auth_main .prof_area .text .auth_name {
    margin: 10px 0 15px;
    font-size: 16px;
  }
  .post-page .auth_info .auth_main .prof_area .text .auth_link a {
    font-size: 12px;
    padding: 5px 12px 6px 8px;
    letter-spacing: 0;
  }
  .post-page .auth_info .auth_main .prof_area .comment {
    margin-top: 15px;
    font-size: 12px;
  }
  .post-page .auth_info .auth_main .posts ul {
    margin: 0 -1vw;
  }
  .post-page .auth_info .auth_main .posts ul li {
    padding: 0 1vw;
  }
  .post-page .auth_info .auth_main .posts ul li a:hover {
    opacity: 1;
  }
  .post-page .auth_info .auth_main .posts ul li a .date {
    font-size: 13px;
    margin: 10px 0 5px;
  }
  .post-page .auth_info .auth_main .posts ul li a .title {
    font-size: 12px;
    letter-spacing: 0;
  }
  /* --- video挿入時の設定 ---*/
  .wp-video {
    width: auto !important;
  }
}