@charset "UTF-8";



/* blog_menu
***************************************************************/
.blog_menu ul{
  display: flex;
  flex-wrap: wrap;
}
.blog_menu ul li {
  width: 19.2%;
  text-align: center;
  margin-right: 1%;
}
.blog_menu ul li a{
  height: 50px;
  color: #fff;
  /*background: #02abeb;*/
  background: #999999;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: .3s ease;
}
.blog_menu ul li a.current {
    background: #fcc800;
    color: #000;
}

.tax-blog_tag .tag_wrap.tag_menu_wrap a.current {
    background: #fcc800;
    color: #000;
}
/*--------------------PC--------------------*/
@media all and (min-width:768px){
  .blog_menu ul li a:hover {
      background: #fcc800;
      color: #000;
      transition: .3s ease;
  }
  .blog_menu ul li:nth-child(5n){
    margin-right: 0;
  }
  .blog_menu ul li:nth-child(n + 6){
    margin-top: 15px;
  }
}
/* サイドバー付き1500以上のみ*/
@media all and (min-width:1500px) {
}

/*ハンバーガー+PC以下*/
@media all and (min-width:768px) and (max-width:1499px) {
  .blog_menu ul li {
    width: 19.5%;
    text-align: center;
    margin-right: 0.5%;
  }
  .blog_menu ul li a {
    letter-spacing: 0;
    font-size: 85%;
  }
  .tag_wrap.tag_menu_wrap a {
    letter-spacing: 0;
    font-size: 90%;
  }

}
/*--------------------SP--------------------*/
@media all and (max-width:767px){
  .blog_menu ul li {
    width: calc((100% - 4px) / 2);
    text-align: center;
    margin-right: 4px;
  }
  .blog_menu ul li:nth-child(2n) {
    margin-right: 0;
  }
  .blog_menu ul li:nth-child(n + 3){
    margin-top: 4px;
  }
  .blog_menu ul li a {
    letter-spacing: 0;
    font-size: 90%;
    height: 40px;
  }
  .tag_wrap.tag_menu_wrap a {
    letter-spacing: 0;
    font-size: 90%;
  }
}
/*--------------------iP_SE--------------------*/
@media all and (max-width:370px){
}





/* blogSec ワークス一覧
***************************************************************/
.blogSec .inner {
  display: flex;
  justify-content: center;
}

.mein_box{
  max-width: 805px;
  width: 67%;
}
.blog_cat_ttl{
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-align: center;
  margin-bottom: 1.5em;
}
* + .blog_cat_ttl{
  margin-top: 5em;
}

.blog_contents{
  border-bottom: 2px dotted #727272;
}
/*.blog_contents + .blog_contents{
}*/
.blog_contents > *{
  padding: 2.2em 0;
  display: block;
}
.blog_contents:first-child > *{
  padding: 0 0 2.7em;
}


.blog_txt .ttl {
    font-size: 20px;
    font-weight: 700;
    color: #10b7ee;
    line-height: 1.5;
    position: relative;
    display: flex;
    align-items: center;
}
.blog_txt .date{
  font-size: 16px;
  font-weight: 500;
  color: #727272;
  position: relative;
  display: flex;
  align-items: center;
  margin-top: 0.7em;
}
.blog_txt .date::before {
    content: '';
    background: url(../img/common/time_ico.svg) center / contain no-repeat;
    flex-shrink: 0;
    display: block;
    width: 0.82em;
    height: 0.82em;
    position: relative;
    margin-right: 0.5em;
    top: 0.08em;
}
.blog_txt .file_size, .file_item .file_size {
  font-size: 14px;
  font-weight: 400;
  color: #727272;
  position: relative;
  display: inline-flex;
  align-items: center;
  margin-left: 1em;
}
.blog_txt .file_size::after,
.file_item .file_size::after {
    content: '';
    background: url(../img/common/pdf.svg) center / contain no-repeat;
    flex-shrink: 0;
    display: inline-block;
    width: 1.8em;
    height: 1.8em;
    margin-left: 0.5em;
    vertical-align: middle;
}
.blog_txt .youyaku{
  font-size: 16px;
  margin-top: 1.5em;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  line-height: 1.5;
}

.electronic_box{
  .blog_box > *{
    display: flex;
    align-items: center;
  }
  .blog_txt{
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: calc(100% - 8em);
  }
  .post_date {
    font-size: 16px;
    font-weight: 700;
    width: 8em;
  }
}

/*--------------------PC--------------------*/
@media all and (min-width:768px){
  .blog_contents a:hover {
      background: #f0fbff;
  }
  * + .blog_cat_ttl{
    margin-top: 3em;
  }
}

@media all and (max-width:1024px) {
  .blogSec .inner {
      justify-content: flex-start;
      flex-direction: column;
  }
  .mein_box {
    max-width: 100%;
    width: 100%;
  }
  .blog_txt .youyaku{
    margin-top: 1em;
    -webkit-line-clamp: 2;
  }
  .blog_contents > * {
    padding: 1.5em 0;
    display: block;
  }
}

@media all and (max-width:767px){
  .electronic_box {
    .blog_box > * {
        align-items: flex-start;
        flex-direction: column;
    }
    .blog_txt {
      margin-top: 0.5em;
      width: 100%;
    }
  }
  .blog_txt .ttl {
    font-size: 18px;
    max-width: 78%;
  }
  .blog_txt .file_size, .file_item .file_size {
    font-size: 12px;
  }
  * + .blog_cat_ttl {
    margin-top: 3em;
  }
}






/*サイドバー*/


.side_bar{
    max-width: 340px;
    flex-grow: 1;
    margin-left: 5%;
}
.side_bar h3.side_ttl{
  font-size: 24px;
  font-weight: 700;
}
.side_bar h3.side_ttl02{
  margin-top: 50px;
}
.side_bar .side_ttl_sub {
    font-size: 14px;
    color: #12b7ef;
    margin-top: 10px;
    position: relative;
    display: flex;
    align-items: center;
    margin-bottom: 40px;
    letter-spacing: 0.1em;
}
.side_bar .side_ttl_sub::after{
    content: '';
    background: #12b7ef;
    display: block;
    width: 100%;
    height: 1px;
    margin-left: 10px;
}
.side_bar_01 {
    border: 4px solid #12b7ef;
    padding: 10% 5%;
    border-radius: 20px;
}
.side_bar_01 a {
    position: relative;
    display: flex;
    line-height: 1.6;
    font-size: 16px;
}
.side_bar_01 a + a{
    margin-top: 1.5em;
}
.side_bar_01 a::before {
    content: '';
    background: url(../img/common/arrow_r_bl.svg) center / contain no-repeat;
    flex-shrink: 0;
    display: block;
    width: 1.2em;
    height: 1.2em;
    top: 0.2em;
    position: relative;
    margin-right: 1.2em;
}

.side_twitter {
    /* height: 100%; */
    /* max-width: 600px; */
    /* height: 100%; */
    overflow-y: scroll;
    width: 100%;
    background-color: #fff;
    height: 25vw;
    max-height: 700px;
    min-height: 350px;
    margin-top: 8%;
}
.side_bar_02 {
    border: 4px solid #12b7ef;
    padding: 10% 5%;
    border-radius: 20px;
    margin-top: 10%;
}

.side_bar_02 > div:nth-of-type(n + 2) ul{
  display: none;
}
/*.side_bar_02 h4.open + div{
  display: block;
}*/



.blog_wrap a.blog_content {
    width: 29.6%;
    margin-right: 5.6%;
}
.blog_img {
    display: block;
    /* border: 1px solid #02abeb; */
    box-shadow: 0.7em 0.7em 0 #fce799;
    transform: translate(0px, 0px);
    transition: .3s ease;
    height: 0;
    padding-bottom: 66.5%;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}
a.blog_content:hover .blog_imgwrap .blog_img{
    /*border: 1px solid #000;*/
    transform: translate(5px, 5px);
    box-shadow: 0em 0em 0 #fce799;
}
.cat_date_wrap {
    display: flex;
    justify-content: space-between;
    margin-top: 1.8em;
}
.cat_date_wrap .date_wrap {
    margin-top: 0px;
}
.blog_categoly {
    background-color: #fcc800;
    color: #000;
    font-weight: 500;
    padding: 5px 8px;
    font-size: 14px;
    display: inline-block;
}

a.blog_content > p{
  color: #727272;
  margin-top: 1.8em;
}
a.blog_content h3{
  /*color: #f0b502;*/
  color: #000;
  font-weight: 700;
  margin-top: 0.7em;
}

.blog a.btn01{
  margin-left: auto;
  margin-right: auto;
}


/*--------------------PC--------------------*/
@media all and (min-width:768px){
  .side_bar_01 a:hover {
      color: #12b7ef;
  }
  .side_bar_02 a:hover {
      color: #12b7ef;
  }
}
@media all and (max-width:1024px) {
  .side_bar {
    max-width: 100%;
    margin-left: 0;
    margin-top: 8%;
  }
  .side_bar_01 {
    border: 3px solid #12b7ef;
    padding: 5% 4%;
  }
  .side_bar_02 {
    border: 3px solid #12b7ef;
    padding: 5% 4%;
    border-radius: 20px;
    margin-top: 4%;
  }
  .side_twitter {
    /* height: 100%; */
    /* max-width: 600px; */
    /* height: 100%; */
    height: clamp(500px, 69vw, 800px);
    /*max-height: 700px;
    min-height: 350px;*/
    margin-top: 5%;
  }
}



/*アコーディオン部*/
ul.accordion {
    font-size: 16px;
}
/*ul.accordion ul{
  margin: 5px 0 30px 15px;
}*/
ul.accordion ul.hide{ /* アコーディオン非表示 */
  display: none;
}
ul.accordion li{ /* リセット */
  list-style: none;
  background: none;
  padding: 0;
}
  ul.accordion li + li{ /* リセット */
    margin-top: 2em;
  }
ul.accordion li p {
    margin: 0;
    display: flex;
    align-items: center;
  transition: .3s ease;
}
/* アイコン背景 */
ul.accordion li p span{
  display: inline-block;
  width: 22px;
  height: 22px;
  position: relative;
  background: url(../img/common/arrow_r_bl.svg) center / contain no-repeat;
  margin-right: 20px;
  transition: .3s ease;
  /*background: #09c;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  margin-right: 5px;
  vertical-align: -2px;*/
}

 /* アイコン横棒 */
/*ul.accordion li p span:before{
  content:'';
  height: 1px;
  width: 9px;
  display: block;
  background: #fff;
  position: absolute;
  top: 7px;
  left: 3px;
}*/
 /* アイコン縦棒（閉じてるとき） */
/*ul.accordion li p span:after{
  content: '';
  height: 9px;
  width: 1px;
  display: block;
  background: #fff;
  position: absolute;
  top: 3px;
  left: 7px;
}*/
 /* アイコン縦棒なし（開いてるとき） */
/*ul.accordion li p span.acv_open:after{
  height: 0;
  width: 0;
}*/
ul.accordion li p span.acv_open{
  transform: rotate(90deg);
}
ul.accordion ul li {
    margin-left: 40px;
    margin-top: 20px;
    position: relative;
    display: flex;
    align-items: center;
}
 /* アーカイブリストマーク */
/*ul.accordion ul li::after{
  display: block;
  content: '';
  position: absolute;
  top: .2em;
  left: -1em;
  width: 6px;
  height: 6px;
  border-right: 1px solid #666;
  border-bottom: 1px solid #666;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}*/

ul.accordion ul li::before {
    content: '';
    background: url(../img/common/arrow_r_bl2.svg) center / contain no-repeat;
    flex-shrink: 0;
    display: block;
    width: 12px;
    height: 12px;
/*    top: 0.2em;*/
    position: relative;
    margin-right: 0.6em;
}



/*--------------------PC--------------------*/
@media all and (min-width:768px){
  ul.accordion > li:hover p{
    cursor: pointer;
    color: #10b7ee;
  }

}

@media all and (max-width:1024px) {

  ul.accordion li + li {
    margin-top: 1em;
  }
  ul.accordion ul li {
      margin-left: 40px;
      margin-top: 10px;
  }
  .side_bar h3.side_ttl02 {
    margin-top: 8%;
  }
  .side_bar_01 a + a {
    margin-top: 3%;
  }
  .side_bar .side_ttl_sub {
    margin-bottom: 6%;
  }
}




















/*--------------------PC--------------------*/
@media all and (min-width:768px){
  .blog_wrap a.blog_content:nth-child(3n){
      margin-right: 0;
  }
  .blog_wrap a.blog_content:nth-child(n + 4){
    margin-top: 5%;
  }
}

/*--------------------SP--------------------*/
@media all and (max-width:767px){
  .blog.sec {
      padding-top: 80px;
      padding-bottom: 80px;
  }
  .blog_wrap a.blog_content {
    width: 47%;
    margin-right: 5.6%;
  }
  .blog_wrap a.blog_content:nth-child(2n){
      margin-right: 0;
  }
  .blog_wrap a.blog_content:nth-child(n + 3){
      margin-top: 15%;
  }
  .blog_img {
      box-shadow: 0.4em 0.4em 0 #cceefb;
  }
  a.blog_content > p {
    margin-top: 1.2em;
    font-size: 14px;
  }
  a.blog_content h3 {
    margin-top: 0.4em;
    letter-spacing: 0;
  }
}
/*--------------------iP_SE--------------------*/
@media all and (max-width:370px){
}





/* aaa
***************************************************************/

/*--------------------PC--------------------*/
@media all and (min-width:768px){
}
/* サイドバー付き1500以上のみ*/
@media all and (min-width:1500px) {
}

/*ハンバーガー+PC以下*/
@media all and (min-width:768px) and (max-width:1499px) {

}
/*--------------------SP--------------------*/
@media all and (max-width:767px){
}
/*--------------------iP_SE--------------------*/
@media all and (max-width:370px){
}