@charset "UTF-8";
@import url("global.css");
/* ------------------------------
 Index-page
------------------------------ */
ul.topics {
  border-top: #ccc 1px solid;
}
ul.topics li {
  border-bottom: #ccc 1px solid;
  padding: 5px;
}
ul.topics li div, ul.topics li a {
  display: block;
  text-align: justify;
  font-size: 14px;
  line-height: 18px;
  padding: 20px;
}
ul.topics li a {
  color: #374360;
}
ul.topics li a .text::after {
  content: "\f101";
  color: #62749B;
  display: inline-block;
  margin-left: 15px;
  vertical-align: -1px;
  font-family: "Font Awesome 5 free";
  font-size: 18px;
  font-weight: 900;
}
ul.topics li a:hover {
  background-color: rgba(55, 67, 96, 0.1);
}
ul.topics li span {
  display: block;
}
ul.topics li span.date {
  width: 100px;
  letter-spacing: 0;
  float: left;
  font-weight: 700;
  font-family: "Poppins", "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;
}
ul.topics li span.text {
  margin-left: 100px;
}

/* ------------------------------
 Post-Page
------------------------------ */
.post .posttitle {
  margin-bottom: 80px;
  text-align: center;
}
.post .posttitle span.date {
  display: block;
  margin: 10px 0 0;
  font-family: "Poppins", "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;
  font-weight: 900;
  color: #ccc;
}
.post .posttitle span.title {
  font-size: 28px;
  line-height: 1.6;
}
.post .photo {
  text-align: center;
}
.post .pdf {
  margin: 20px 0 0;
}
.post .pdf a {
  display: block;
  background-color: #374360;
  color: #fff;
  text-align: center;
  padding: 20px 30px;
  font-weight: bold;
  font-size: 18px;
  position: relative;
}
.post .pdf a::before {
  content: "\f1c1";
  display: inline-block;
  vertical-align: 5%;
  font-family: "Font Awesome 5 free";
  font-weight: 900;
  margin-right: 10px;
}
.post .pdf a::after {
  content: "\f101";
  font-family: "Font Awesome 5 free";
  font-weight: 900;
  position: absolute;
  line-height: 30px;
  right: 20px;
  top: 50%;
  margin-top: -15px;
}
.post .pdf a:hover {
  background-color: rgba(55, 67, 96, 0.7);
}
.post #postbody {
  margin: 80px 0 0;
  text-align: center;
}
.post #postbody .postbody {
  display: inline-block;
  text-align: justify;
}

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

 Responsive-Breakpoint-1 (1500px)
 
------------------------------------------------------------------------------------------------------------------------ */
@media only screen and (max-width: 1500px) {
  /* ------------------------------
   Index-page
  ------------------------------ */
  /* ------------------------------
   Post-Page
  ------------------------------ */
}
/* ------------------------------------------------------------------------------------------------------------------------

 Responsive-Breakpoint-1.5 (1320px)
 
------------------------------------------------------------------------------------------------------------------------ */
@media only screen and (max-width: 1320px) {
  /* ------------------------------
   Index-page
  ------------------------------ */
  /* ------------------------------
   Post-Page
  ------------------------------ */
}
/* ------------------------------------------------------------------------------------------------------------------------

 Responsive-Breakpoint-2 ( 960px )
 
------------------------------------------------------------------------------------------------------------------------ */
@media only screen and (max-width: 959px) {
  /* ------------------------------
   Index-page
  ------------------------------ */
  ul.topics li a:hover {
    background-color: transparent;
  }

  /* ------------------------------
   Post-Page
  ------------------------------ */
  .post .posttitle {
    margin-bottom: 80px;
  }
  .post .posttitle span.title {
    font-size: 26px;
  }
  .post #postbody {
    margin: 60px 0 0;
  }
}
/* ------------------------------------------------------------------------------------------------------------------------

 Responsive-Breakpoint-3 ( 644px )
 
------------------------------------------------------------------------------------------------------------------------ */
@media only screen and (max-width: 644px) {
  /* ------------------------------
   Index-page
  ------------------------------ */
  ul.topics li div, ul.topics li a {
    padding: 16px 0  16px 0;
    text-align: left;
  }
  ul.topics li a {
    padding-right: 35px;
    position: relative;
  }
  ul.topics li a .text::after {
    display: block;
    margin: -10px 0 0 0;
    font-size: 21px;
    position: absolute;
    right: 0;
    top: 50%;
  }
  ul.topics li span {
    display: block;
  }
  ul.topics li span.date {
    width: 90px;
  }
  ul.topics li span.text {
    margin-left: 90px;
  }

  /* ------------------------------
   Post-Page
  ------------------------------ */
  .post .posttitle {
    margin-bottom: 40px;
  }
  .post .posttitle span.date {
    font-size: 16px;
  }
  .post .posttitle span.title {
    font-size: 21px;
  }
  .post .pdf {
    margin: 10px 0 0;
  }
  .post .pdf a {
    padding: 10px;
    font-size: inherit;
  }
  .post #postbody {
    margin: 40px 0 0;
  }
}