/* html {
  scroll-behavior: smooth;
} */

/* misc */
sup { font-size: 0.8rem; vertical-align: top; }

/* abchor_nav */

#anchor_nav {
   width: 100%;
  position: relative;
  margin: 40px auto 70px;
  background: #fff;
  border-top: 1px solid #f0f0f0;
  border-bottom: 1px solid #f0f0f0;
   z-index: 10;
}
  #anchor_nav .wrap {
    width: 100%;
    padding: 25px 0 0;
    text-align: left;
  }
  #anchor_nav b {
    position: relative;
    display: block;
    text-align: left;
    font-size: 25px;
    font-weight: 500;
    line-height: 1.45;
    letter-spacing: 0.1em;
    margin: 0;
    padding: 0 0 1em;
    /* border-bottom: 2px solid #f0f0f0; */
    z-index: 10;
    }
  #anchor_nav ul {
    width: 100%;
  }
    #anchor_nav li { 
      position: relative;
      padding: 0 0 10px 30px;
      line-height: 1.6;
      }
    #anchor_nav li a { display: block; }
        #anchor_nav li:before {
          content: "";
          position: absolute;
          width: 8px;
          height: 1px;
          background: #000;
          left: 15px;
          top: 15px;
        }



@media (max-width: 768px) {

/* misc */
sup { font-size: 2.4vw; }
video { width: 100%; height: auto; }

/* abchor_nav */

#anchor_nav {  width: 100%;   margin: 10px auto 50px; padding: 0;  }
  #anchor_nav .wrap {  padding: 5.333vw 0 0;  }
  #anchor_nav b {  font-size: 4.8vw;  margin: 0;  }
        #anchor_nav li { padding-left: 4vw; font-size: 3.75vw;  letter-spacing: -0.213vw;  }
          #anchor_nav li:before { top: 3.2vw; left: 0; }

}

/* LaTex */
p mjx-container.MathJax {
  display: block;
  padding-bottom: 1em;
  overflow:auto hidden;
  font-size:16px !important;
}

@media (max-width: 768px) {
/* LaTex */
/* p mjx-container.MathJax {  font-size:9px !important;} */
}


/* New KV */
/*.techblog main .sec-slider .swiper-container .swiper-slide.kv-slide .wrap { width: 100%; height: 100%; display: flex; padding-top: 0;}
.techblog main .sec-slider .swiper-container .swiper-slide.kv-slide .wrap .thumb, .techblog main .sec-slider .swiper-container .swiper-slide.kv-slide .wrap .detail { display: block; width: 50%; height: 100%; position: relative; }
.techblog main .sec-slider .swiper-container .swiper-slide.kv-slide .wrap .thumb { overflow: hidden; }
.techblog main .sec-slider .swiper-container .swiper-slide.kv-slide .wrap .thumb span { display: block; width: 100%; height: 100%; background-repeat: no-repeat; background-size: cover; background-position: center center; transition: transform 0.3s; }
.techblog main .sec-slider .swiper-container .swiper-slide.kv-slide .wrap .detail { background: url("../images/slider-bg.jpg") no-repeat right top/cover; padding: 70px 70px 50px; position: relative; }
.techblog main .sec-slider .swiper-container .swiper-slide.kv-slide.kv-slide .detail { margin-left: -16px; padding: 160px 0 0;     background :url("../images/slider-bg.jpg") no-repeat right top/cover ; }
.techblog main .sec-slider .swiper-container .swiper-slide.kv-slide.kv-slide .detail .logo { width: 77px; height: 216px; margin: 0 auto; }
.techblog main .sec-slider .swiper-container .swiper-slide.kv-slide.kv-slide .detail .logo img { width: 100%; }
.techblog main .sec-slider .swiper-container .swiper-slide.kv-slide.kv-slide .detail h2 { font-family: "din-2014-narrow", sans-serif; font-weight: 600; font-size: 40px; text-align: center; margin: 15px 0 0; }*/
.techblog main .sec-slider .swiper-container .swiper-slide.kv-slide .wrap { width: 670px; margin: 0 auto; }
.techblog main .sec-slider .swiper-container .swiper-slide.kv-slide .wrap .thumb { width: 672px; display: flex; justify-content: center; align-items:center; flex-direction: column; margin: 0 auto;   background :url("../images/kv.jpg") no-repeat right top/cover ;}
.techblog main .sec-slider .swiper-container .swiper-slide.kv-slide .wrap .thumb .logo { filter: invert(100%) grayscale(100%) contrast(100); }
.techblog main .sec-slider .swiper-container .swiper-slide.kv-slide .wrap .thumb h2 { font-family: "din-2014-narrow", sans-serif; font-weight: 600; font-size: 40px; text-align: center; margin: 15px 0 0; color: #fff; text-shadow: 1px 1px 0 #333, -1px -1px 0 #333, -1px 1px 0 #333, 1px -1px 0 #333, 0px 1px 0 #333, 0-1px 0 #333, -1px 0 0 #333, 1px 0 0 #333; */
}}
.techblog main .sec-slider .swiper-container .swiper-slide.kv-slide.kv-slide .detail { width: 672px;  background : #fff url("../images/slider-bg.jpg") no-repeat right top/cover ;}
.techblog main .sec-slider .swiper-container .swiper-slide.kv-slide.kv-slide .detail .text { font-size: 24px; text-align: center; line-height: 1.65; letter-spacing: 0.1em; margin: 46px 0 0; display: block; }

  @media (max-width: 768px) {    .techblog main .sec-slider .swiper-container .swiper-slide.kv-slide .wrap { width: 100%; height: 100%;  }
    .techblog main .sec-slider .swiper-container .swiper-slide.kv-slide .wrap .thumb { width: 100%; max-height:211px; }
    .techblog main .sec-slider .swiper-container .swiper-slide.kv-slide .wrap .thumb .logo { width: 10.667vw; height: auto;  margin-top: 2.667vw; }
    .techblog main .sec-slider .swiper-container .swiper-slide.kv-slide .wrap .thumb .logo img { width: 100%; height: 100%; }
    .techblog main .sec-slider .swiper-container .swiper-slide.kv-slide .wrap .thumb h2 { font-family: "din-2014-narrow", sans-serif; font-weight: 600; font-size: 8.533vw; text-align: center; margin: 15px 0 0; color: #fff; }
    .techblog main .sec-slider .swiper-container .swiper-slide.kv-slide.kv-slide .detail { width: 100%; height: 36vw;  background: #fff url("../images/slider-bg@sp.jpg") no-repeat right top/cover; padding: 8.105vw 0 0;}
    .techblog main .sec-slider .swiper-container .swiper-slide.kv-slide.kv-slide .detail .text { font-size: 3.516vw; margin: 2.667vw 0 0; }
/*    .techblog main .sec-slider .swiper-container .swiper-slide.kv-slide.kv-slide .detail { background: #fff url("../images/slider-bg@sp.jpg") no-repeat right top/contain; padding: 8.105vw 0 0; }
    .techblog main .sec-slider .swiper-container .swiper-slide.kv-slide.kv-slide .detail .logo { width: 8vw; height: auto; margin: 0 auto; }
   .techblog main .sec-slider .swiper-container .swiper-slide.kv-slide.kv-slide .detail h2 { font-size: 6.4vw; margin: 4vw 0 0; }
   .techblog main .sec-slider .swiper-container .swiper-slide.kv-slide.kv-slide .detail p.text { position: absolute; left: -100%; bottom: 0; width: 100vw; height: 43.733vw; z-index: 20; padding: 50px 2.441vw 3.906vw 10px; background-color:#fff; font-size: 3.516vw; border-top: solid 1px #e9e9e9; border-right: solid 1px #e9e9e9;  }*/
  }

/* New index */
.techblog main .sec-slider {
    margin: -30px 0 96px;
    padding-top: 0;
}
.techblog main .sec-slider .swiper-container .swiper-slide {
    width: 672px !important;
    height: auto;
    margin: 0 5px;
}
.techblog main .sec-slider .swiper-container .swiper-slide .wrap { 
    display: block;
    position: relative;
}
.techblog main .sec-slider .swiper-container .swiper-slide .wrap .thumb {
  width: 672px;
  height: 378px;
  margin: 0 auto;
}
.techblog main .sec-slider .swiper-container .swiper-slide .wrap .detail {
    position: relative;
    left: 0;
    bottom: 0;
    width: 672px;
    height: 220px;
    margin: 0 auto;
    padding: 20px 30px;
    background: #fff;
    z-index: 20;
    /* background-color:rgba(255,255,255,0.4); */
}
.techblog main .sec-slider .swiper-container .swiper-slide .wrap .detail .category {
   margin: 0 20px 10px 0;
}
.techblog main .sec-slider .swiper-container .swiper-slide .wrap .detail p.title {
    font-size: 24px;
    margin: 0 0 10px;
}
.techblog main .sec-slider .swiper-container .swiper-slide .wrap .detail time {
    color: #333;
    font-weight: 500;
}
.techblog main .sec-slider .swiper-container .swiper-slide .wrap .detail .tags {
    margin: 20px 0 0;
}
  @media (max-width: 768px) {
    .techblog main .sec-slider { margin: 0 0 10.667vw; padding-top:  5.333vw; }
    .techblog main .sec-slider .swiper-container .swiper-slide { width: 100% !important; height: 100vw; }
    .techblog main .sec-slider .swiper-container .swiper-slide .wrap { padding-top: 0;}
    .techblog main .sec-slider .swiper-container .swiper-slide .wrap .thumb  { position: relative; width: 100%;height: 100%; max-height: 211px; }
    .techblog main .sec-slider .swiper-container .swiper-slide .wrap .detail  { position: relative; width: 100%; height: 36vw; padding: 4.883vw 2.441vw 3.906vw 4.883vw;  }
    .techblog main .sec-slider .swiper-container .swiper-slide .wrap .detail p.title  {font-size: 3.516vw; line-height: 1.5 !important; }
    .techblog main .sec-slider .swiper-container .swiper-slide .wrap .detail .category { clear: both;   margin: -2.667vw 2.667vw 0 -2.667vw; }
    .techblog main .sec-slider .swiper-container .swiper-slide .wrap .detail time { font-size: 3.125vw;  letter-spacing: 0.05em; display: inline-block !important; padding: 0 0 0; color: #a8a8a8;}
    .techblog main .sec-slider .swiper-container .swiper-slide .wrap .detail time.pc-item { display: none !important;}
    .techblog main .sec-slider .swiper-container .swiper-slide .wrap .detail .tags { display: flex; margin: 3.2vw 0 0; }
    .techblog main .sec-slider .swiper-container .swiper-slide .wrap .detail .tags li a  { font-size: 2.344vw;}
  }

.techblog .inner-archive .inner {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.techblog .inner-archive .item {
    width: 336px;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    position: relative;
    margin-bottom: 20px;
    border: solid 1px #adadad; 
    overflow: hidden;
}
.techblog .inner-archive .item:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
    width: 100%;
    height: 0;
    background: none;
}
.techblog .inner-archive .item:after {
    height: 0;
    background: none;
}
.techblog .inner-archive .item .thumb {
    width: 100%;
    position: relative;
    overflow: hidden;
}
.techblog .inner-archive .item .thumb:before {
    width: 0;
    background: none;
}
.techblog .inner-archive .item:hover {
  transition:0.3s all;
}

.techblog .inner-archive .item .thumb span img {
    width: 336px;
    height: 189px;
}
.techblog .inner-archive .item .detail p.archive-title {
    font-size: 18px;
    font-weight: 500;
    line-height: 1.5;
    margin: 7px 0 15px;
    letter-spacing: 0.02em;
}
.techblog .inner-archive .item .detail time {
    font-size: 14px;
    letter-spacing: 0.08em;
}
.techblog .inner-archive .item .detail {
    width: 100%;
    padding: 20px 16px 16px;
    position: relative;
    z-index: 12;
}
.techblog .inner-archive .item .detail:before {
    width: 0;
    background: none;
}

.techblog .inner-archive .item + .item {
    margin: 0 0 24px;
}
   @media (max-width: 768px) {
    .techblog .inner-archive .inner { width:100%; }
    .techblog main .sec-archives .wrap { margin: 0 2.667vw; }
    .techblog .inner-archive .item a .thumb { display: block; height: auto; }
    .techblog .inner-archive .item { width: 49%; flex-wrap: nowrap;}
    .techblog .inner-archive .item > a {width: 100%;height: 100%; padding: 0 0 4vw 0;  max-height: 112px;}
    .techblog .inner-archive .item .thumb span { }
    .techblog .inner-archive .item .thumb span img { width: 100%; height: 25.792vw;; }
    .techblog .inner-archive .item .detail p.archive-title {font-size: 2.93vw; }
   .techblog .inner-archive .item .detail { padding: 0 2.667vw 2.667vw; }
    .techblog .inner-archive .item .detail .archive-category { min-width: 18.667vw; margin-right: 2.667vw;} 
    .techblog main .sec-slider .swiper-nav-wrap { margin: 0 auto;}
  }

.swiper-slide {
  transition: transform 0.6s;
}
/* 左右のスライド */
.swiper-slide {
  transform: scale(0.85);
  opacity: 0.5;
}
.swiper-slide.swiper-slide-active {
  transform: scale(1);
  opacity: 1;
}

/* 定型文動画下キャプション 20230415 */
p.moviecaption {
    font-size: 14px;
    font-weight: 500;
    line-height: 1.93;
    letter-spacing: 1.4px;
    text-align: left;
    color: #a8a8a8;
    margin-top: 0 !important;
}
@media (max-width: 768px) {
p.moviecaption {
    font-size: 3.125vw;
    letter-spacing: 0.1em;
    margin-top: 0.977vw;}
}


/* タグ一覧レイアウト 20230705 */
.tags-index {
  margin-bottom: 60px;
}
  .tags-index ol {
  }
    .tags-index li {
      display: inline-block;
      margin: 0.6em;
      font-size: 14px;
      font-weight: 500;
      line-height: 1.5;
      letter-spacing: 0.02em;
      background: #ebebeb;
      transition: opacity 0.3s;
    }
      .tags-index li a { 
            display: block;
            padding: 5px 12px;
      }
      .tags-index li a:hover { opacity:60%; }

@media (max-width: 768px) {
    .tags-index li { font-size: 2.93vw; font-weight: 500; line-height: 1.5; letter-spacing: 0.02em; }
}


.techblog .inner-sidenav .item-tag {
    margin-bottom: 48px;
}

/* 右カラムタグラベルレイアウト 2023008 */
.techblog .inner-sidenav .item-tag .tag-check-area input,
.techblog .tags-index .tag-check-area input {
    display: none;
}

.techblog .inner-sidenav .item-tag .tag-check-area,
.techblog .tags-index .tag-check-area  {
    position: relative;
    margin: 0 0 15px;
}
/*   .techblog .inner-sidenav .item-tag .tag-check-area::after {
    display: block;
    position: absolute;
    bottom: -33px;
    left: 50%;
    width: 0;
    height: 0;
    margin-left: -30px;
    border-width: 20px 30px 0 30px;
    border-style: solid;
    border-color: #dbdbdb transparent transparent transparent;
    content: '';
}
*/.techblog .inner-sidenav .item-tag label,
.techblog .tags-index label  {
    display: inline-block;
    margin: 0 2px 6px 0;
    padding: 2px 5px 2px;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.92;
    letter-spacing: 1px;
    border: solid 1px #c0c6c6;
    color: #333;
    transition: opacity 0.3s;
    cursor: pointer;
}
  .techblog .tags-index label  {
    margin: 0 10px 15px 0;
}

.techblog .inner-sidenav .item-tag input:checked+label,
.techblog .tags-index input:checked+label {
    border: solid 1px #c0c6c6 !important;
}
  .techblog .inner-sidenav .item-tag label::before,
.techblog .tags-index label::before  {
    content: "";
    display: inline-block;
    margin-top: 3px;
    margin-right: 6px;
    width: 20px;
    height: 20px;
    background-image:url("../images/check_box_outline_blank_FILL1_wght200_GRAD0_opsz48.svg");
    background-size: contain;
    vertical-align: top; 
    filter: opacity(50%);
}
  .techblog .inner-sidenav .item-tag input:checked+label::before,
.techblog .tags-index input:checked+label::before   {
    background-image:url("../images/check_box_FILL1_wght400_GRAD0_opsz48.svg");
    filter: opacity(80%);
}
  .techblog .inner-sidenav .item-tag label:hover,
.techblog .tags-index label:hover   {
    border: solid 1px #333 !important;
    /* background-color: #dbdbdb; */
    transition: 0.3s ;
  }
  .techblog .inner-sidenav .item-tag li:checked,
.techblog .tags-index li:checked {
    border: solid 1px #c0c6c6 !important;
    background-image:url("../images/select_check_box_FILL0_wght500_GRAD0_opsz48.svg");
  }
.tag-input-area.btn-base { 
  width: 100%;
  height: 44px; 
}
.tags-index .tag-input-area.btn-base { 
  width: 270px;
  height: 44px; 
}
  .tag-input-area.btn-base .tag-submit-btn {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
    padding: 0 0 0 10px;
    z-index: 10;
    text-align: center;
    font-size: 15px;
    color: #fff;
    font-weight: 400;
    font-style: normal;
    letter-spacing: 0.1em;
    transition-delay: 0.2s;
    transition: color 0.3s; 
  }
    .tag-input-area.btn-base .tag-submit-btn:before {
      background: #fff;
      opacity: 1;
    }
    .tag-input-area.btn-base .tag-submit-btn:after {
      background: #000;
      opacity: 0;
    }
  .tag-input-area.btn-base span {
    margin: 0 !important;
    padding: 0 !important;
  }
    .tag-input-area.btn-base span:before, .tag-input-area.btn-base span:after {
      content: "";
      width: 23px;
      height: 1px;
      position: absolute;
      left: 0;
      top: 21px;
      transition: opacity 0.4s;
     }
.tag-input-area.btn-base .tag-submit-btn:hover  {
    color: #000;
}

@media (max-width: 768px) {
.techblog .inner-sidenav .item-tag .tag-check-area { margin: 0 0 4vw; }
.tag-input-area.btn-base { width: 66.895vw; height: 11.035vw; margin: 0 auto;}
  .tag-input-area.btn-base .tag-submit-btn {font-size: 3.711vw; font-weight: 300; }

.techblog .inner-sidenav .item-tag label { font-size: 2.93vw; }

.tag-submit-btn { font-size: 3.125vw; letter-spacing: 0.1em; }

input[type="submit"] {
  -webkit-appearance: none;
  border-radius: 0;
}
}
/* 執筆者リンク 2023008 */
a.link-auther:hover {opacity: 0.7;
 	transition:0.3s; 
}

/* 複数選択検索 202309 */
.techblog main .sec-archives .btn-base {
    margin: 0 auto ;
    line-height: 1;
    border: 1px solid #efefef;
}

/* ページャー 202309 */
  .pager ul {
    display: flex;
    margin: 0 auto ;
    text-align: center;
  }
    .pager ul li { 
      margin: 0 1px;
      font-family: "din-2014-narrow", sans-serif;
      font-weight: 400;
      font-size: 14px;
      line-height: 1;
    }
    .pager ul li a {
      display: block;
      padding: 0.4em .8em;
      border: solid 1px #fff;
      line-height: 1;
    }
    .pager ul li a:hover {
      border: solid 1px #333 !important;
      transition: 0.3s ;
    }
    .pager ul li span.current_page {
      display: block;
      padding: .5em 1em;
      line-height: 1;
      background-color: #333;
      color: white;
    }
@media (max-width: 768px) {
  .pager { margin-bottom: 60px; }
    .pager ul li { font-size: 2.344vw; }

}


/* デザインアジャスト24  for SE3rd */
/* code  OL */
@media (max-width: 768px) {
    .entrybody .code-box ol {padding: 0 0 0 0.8em;    }
}
/*   OL */
@media (max-width: 768px) {
    .entrybody ol li { margin: 0 0 0 0.5em; }
}
