@charset "UTF-8";
@import url("global.css");
#pagetitle.image {
  height: 440px;
  margin-top: 0;
  margin-bottom: 80px;
  padding-bottom: 40px;
}
#pagetitle.image .inner {
  text-align: center;
  justify-content: center;
  position: relative;
  z-index: 1;
}
#pagetitle.image .bg {
  width: 100%;
  height: 440px;
  bottom: auto;
  z-index: 0;
}
#pagetitle.image .titleblock {
  width: auto;
}
#pagetitle.image .pagetitle .jp {
  animation: titlejp2 .5s linear .3s 1;
  animation-fill-mode: both;
}
#pagetitle.image .pagetitle .en {
  animation: titleen2 .6s ease-in-out .4s 1;
  animation-fill-mode: both;
}
#pagetitle.image #breadcrumbs {
  margin: 0;
  position: absolute;
  right: 0;
  bottom: -30px;
}

.selectarea {
  margin-top: 60px;
  margin-bottom: -20px;
  background-color: #f3f3f3;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding: 30px 0;
}
.selectarea dl {
  display: flex;
  align-items: center;
  padding: 0 40px;
  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%;
  box-sizing: border-box;
  vertical-align: middle;
  box-shadow: none;
  letter-spacing: 1px;
}
.selectarea ul.banner {
  width: 100%;
  display: flex;
  justify-content: center;
  padding-bottom: 25px;
  margin-top: 20px;
}
.selectarea ul.banner li {
  margin: 0 20px;
}
.selectarea ul.banner li a {
  display: block;
  width: 400px;
  height: 120px;
  box-sizing: border-box;
  position: relative;
}
.selectarea ul.banner li.my a {
  background: #010101 url("../images/president/my_bg.jpg") no-repeat left center;
  background-size: cover;
  color: #fff;
  font-family: 'Zen Old Mincho', "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  font-weight: 500;
  padding: 30px 0 0 37%;
  font-size: 12px;
  letter-spacing: 0;
  overflow: hidden;
  line-height: 1;
  text-align: left;
}
.selectarea ul.banner li.my a::before, .selectarea ul.banner li.my a::after {
  content: "";
  position: absolute;
  top: 5px;
  bottom: 5px;
  width: 50px;
}
.selectarea ul.banner li.my a::before {
  background: url("../images/president/yoshimasa.png") no-repeat center center;
  background-size: contain;
  left: -2px;
}
.selectarea ul.banner li.my a::after {
  background: url("../images/president/masuda.png") no-repeat center center;
  background-size: contain;
  right: -2px;
}
.selectarea ul.banner li.my a .title {
  font-size: 15px;
  display: block;
  margin: 12px 0 5px;
}
.selectarea ul.banner li.my a .en {
  font-size: 11px;
  font-family: "EB Garamond", "Zen Old Mincho", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}
.selectarea ul.banner li.livedoor a {
  background: #fff url("../images/president/livedoor_bg.jpg") no-repeat center right;
  background-size: auto 100%;
  padding: 0 0 0 10px;
  font-size: 14px;
  display: flex;
  align-items: center;
}
.selectarea ul.banner li.livedoor a p {
  text-align: right;
  line-height: 1;
}
.selectarea ul.banner li.livedoor a span {
  display: block;
  margin: 10px -20px 0 0;
  font-size: 20px;
  font-weight: 700;
}

/* ------------------------------
 Index
------------------------------ */
.list {
  display: flex;
  flex-wrap: wrap;
  padding: 0 2vw;
  text-align: left;
}
.list li {
  flex-basis: 25%;
  box-sizing: border-box;
  padding: 0 1vw;
  margin-bottom: 60px;
}
.list li a {
  display: block;
  height: 100%;
}
.list li a:hover .image img {
  filter: blur(3px);
}
.list li a:hover .image::before {
  opacity: 1;
}
.list li a:hover .image::after {
  opacity: 1;
  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: "記事を読む \0bb";
  display: flex;
  justify-content: 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;
  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 .data {
  display: flex;
  justify-content: space-between;
  margin-bottom: 5px;
}
.list li a .date {
  font-family: "EB Garamond", "Zen Old Mincho", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  font-weight: 600;
  margin-bottom: 5px;
}
.list li a .cat {
  margin-right: -10px;
  line-height: 1;
}
.list li a .cat span {
  display: inline-block;
  margin-left: 8px;
  margin-bottom: 8px;
  background-color: #EEEBE5;
  border-radius: 2px;
  font-size: 12px;
  font-weight: 700;
  padding: 7px 8px;
  letter-spacing: 0;
}
.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;
}

.cat-title {
  font-size: 18px;
  margin: -20px 0 70px;
  letter-spacing: .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 .post_body_wrap {
  max-width: 980px;
  margin: 0 auto 100px;
}

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

 Responsive-Breakpoint-1 (1300px)

------------------------------------------------------------------------------------------------------------------------ */
@media only screen and (max-width: 1300px) {
  /* ------------------------------
   Index
  ------------------------------ */
  .list li {
    flex-basis: 33.3333333333%;
    padding: 0 1.5vw;
  }
  .list li a .text {
    font-size: 13px;
  }

  .cat-title {
    margin: -10px 0 60px;
  }

  /* ------------------------------
   Post-Page
  ------------------------------ */
}
/* ------------------------------------------------------------------------------------------------------------------------

 Responsive-Breakpoint-2 ( 960px )

------------------------------------------------------------------------------------------------------------------------ */
@media only screen and (max-width: 959px) {
  #pagetitle.image {
    height: 320px;
    margin-bottom: 40px;
  }
  #pagetitle.image .bg {
    height: 320px;
  }

  .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;
  }
  .selectarea ul.banner {
    margin: 20px 10px 0;
    width: auto;
  }
  .selectarea ul.banner li {
    width: 50%;
    max-width: 400px;
    box-sizing: border-box;
    margin: 0;
    padding: 0 10px;
  }
  .selectarea ul.banner li a {
    width: auto;
  }
  .selectarea ul.banner li.my a {
    padding: 30px 0 0 37%;
    font-size: 11px;
  }
  .selectarea ul.banner li.my a::before, .selectarea ul.banner li.my a::after {
    width: 12%;
  }
  .selectarea ul.banner li.my a .title {
    font-size: min(15px,1.8vw);
  }
  .selectarea ul.banner li.livedoor a {
    font-size: 13px;
    letter-spacing: 0;
    padding: 0 0 0 1vw;
  }
  .selectarea ul.banner li.livedoor a span {
    font-size: min(20px,2.4vw);
  }

  /* ------------------------------
   Index
  ------------------------------ */
  .list {
    padding: 0 4vw;
  }
  .list li {
    flex-basis: 50%;
    padding: 0 2vw;
    margin-bottom: 40px;
  }
  .list li a:hover .image img {
    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;
  }
}
/* ------------------------------------------------------------------------------------------------------------------------

 Responsive-Breakpoint-3 ( 644px )
 
------------------------------------------------------------------------------------------------------------------------ */
@media only screen and (max-width: 644px) {
  #pagetitle.image {
    height: 160px;
    margin-top: 70px;
    margin-bottom: 20px;
    padding-bottom: 30px;
  }
  #pagetitle.image .inner {
    height: 100%;
    display: flex;
  }
  #pagetitle.image .bg {
    position: absolute;
    height: 160px;
    margin: 0;
  }
  #pagetitle.image .titleblock {
    width: auto;
  }
  #pagetitle.image #breadcrumbs {
    bottom: -25px;
    color: #2d2d2d;
  }

  .selectarea {
    margin: 30px 0 -20px;
    padding: 20px 0;
  }
  .selectarea dl {
    padding: 5px 15px;
  }
  .selectarea dl dt {
    letter-spacing: 0;
    width: 100px;
  }
  .selectarea dl dd {
    padding: 0 0 0 10px;
  }
  .selectarea ul.banner {
    width: auto;
    display: block;
    padding-bottom: 0;
    margin: 20px 15px 0;
  }
  .selectarea ul.banner li {
    width: auto;
    max-width: none;
    padding: 0;
    margin-bottom: 15px;
  }
  .selectarea ul.banner li.my a {
    padding: 25px 0 0 39%;
    font-size: 12px;
  }
  .selectarea ul.banner li.my a .title {
    font-size: min(18px,3.3vw);
    margin: 15px 0 5px;
  }
  .selectarea ul.banner li.livedoor a {
    font-size: 12px;
    padding: 0 0 0 10px;
  }
  .selectarea ul.banner li.livedoor a span {
    font-size: min(20px,4.2vw);
    margin: 10px -10px 0 0;
  }

  /* ------------------------------
   Index
  ------------------------------ */
  .list {
    padding: 0 2vw;
    margin-bottom: -60px;
  }
  .list li {
    padding: 0 2vw;
    margin-bottom: 30px;
  }
  .list li a .main {
    padding: 3px 1vw 0;
  }
  .list li a .data {
    display: block;
    margin-bottom: 5px;
  }
  .list li a .date {
    margin-bottom: 3px;
  }
  .list li a .cat {
    margin: 0 0 4px 0;
  }
  .list li a .cat span {
    margin: 0 5px 5px 0;
    font-size: 10px;
    padding: 5px 5px;
  }
  .list li a .title {
    letter-spacing: 0;
  }
  .list li a .text {
    font-size: 11px;
    letter-spacing: 0;
    margin: 10px 0;
  }

  .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: 30px 0 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 .post_body_wrap {
    margin: 0 auto 60px;
  }
}

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