﻿main.detail article{overflow: visible;}

.Breadcrumbs .bl-cat {transform: none !important;}

/* tool */
.tllist{
  flex-wrap: wrap;
}
@media screen and (min-width: 1000px){
  .tllist a.block{
     width: calc(33% - 20px);
  }
}

/* manual */
.manual .flbox{
  flex-wrap: nowrap;
}
@media screen and (min-width: 1000px){
  .manual #logic,
  .manual #psycho{
    width: 50%;
    padding-top: 3rem;
  }
}
.manual h2{
  color: #057ae4;
  font-size: 2.4rem;
  font-weight: 700;
  padding: 3rem 0 1.5rem;
}
.manual h2.h1ttl{
  color: #004986;
  margin-bottom: 0;
}

.manual #psycho h2{
  color: #fb5000;
}
.manual .mainimg{
  border-radius: 10px;
}
@media screen and (max-width: 1000px){
  .manual #logic iframe,
  .manual #psycho iframe{
    width: 100%;
    height: 52vw;
  }
}
.manual .bl-article a{
  text-align: left;
  display: block;
  padding: 10px;
  border-bottom: 2px dotted #ebeff3;
}
.manual .bl-article a span.logic{
  color: #fff;
  background: rgb(3 155 229 / 85%);
  display: inline-block;
  vertical-align: middle;
  font-size: 1.2rem;
  line-height: 2rem;
  font-weight: 500;
  border-radius: 15px;
  padding: 0 5px;
  margin: 0 5px 0 0;
}
.manual .bl-article a span.psycho{
  color: #fff;
  background:#ff7000;
  display: inline-block;
  vertical-align: middle;
  font-size: 1.2rem;
  line-height: 2rem;
  font-weight: 500;
  border-radius: 15px;
  padding: 0 5px;
  margin: 0 5px 0 0;
}

.manual .bl-article .excerpt{
  font-size: 1.5rem;
}
.manual h3{
  color: #004986;
  font-size: 1.8rem;
}
.manual #psycho h3{
  color: #e44a00;
}
@media screen and (min-width: 1000px){
  .manual .bl-prof .profile{
    width: 50%;
  }
}

/* performance */
.performance .flbox{
  flex-wrap: nowrap;
}
@media screen and (min-width: 1000px){
  .performance #package,
  .performance #quality{
    width: 50%;
    padding-top: 3rem;
  }
}
.performance h2{
  color: #057ae4;
  font-size: 2.4rem;
  font-weight: 700;
  padding: 30px 0 20px;
  background: none;
}
.performance h2.h1ttl{
  color: #004986;
  margin-bottom: 0;
}

.performance #quality h2{
  color: #fb5000;
}
.performance .mainimg{
  border-radius: 10px;
}

.performance .bl-article a{
  text-align: left;
  display: block;
  padding: 10px;
  border-bottom: 2px dotted #ebeff3;
}
.performance .bl-article .excerpt{
  font-size: 1.5rem;
}
.performance h3{
  color: #004986;
  font-size: 1.8rem;
}
.performance #quality h3{
  color: #e44a00;
}


.detail .h1ttl{
  margin: 10px 0;
}
.detail .date{
  text-align: right;
  font-weight: 700;
  opacity: .7;
}
.detail .bl-cat{
  color: #fff;
  background: rgb(3 155 229 / 85%);
  display: inline-block;
  font-size: 1.4rem;
  line-height: 2rem;
  font-weight: 500;
  border-radius: 15px;
  padding: 2px 10px;
  margin: 0 auto;
}
@media screen and (min-width: 1000px){
  .detail .bl-cat{
    margin: 0;
  }
}
@media screen and (max-width: 1000px){
  .story .bl-cat{
    margin-left: 12rem;
  }
}
.detail .eyecatch{
  display: inline-block;
  vertical-align: middle;
  margin: -4rem 2rem 0 0;
  width: 10rem;
  height: 10rem;
  float: left;
  border-radius: 10px;
  border: 3px solid #ebeff3;
  background-position: center center;
  background-size: cover;
}
.story.detail .eyecatch{margin-top: -1rem;}
@media screen and (min-width: 1000px){
  .detail .eyecatch{
    float: none;
  }
}
.maintxt{
  text-align: left;
  padding: 0 1rem 1rem;
  overflow: visible;
}
.maintxt div{
  overflow: visible;
}  
@media screen and (min-width: 1000px){
  .maintxt{
    padding: 0 30px 30px;
    max-width: 700px;
    margin: 2rem auto 0;
    line-height: 1.8em;
  }
}
.maintxt h3{
    background: #039BE5;
    color: #ffffff;
    position: relative;
    font-size: 2rem;
    font-weight: 700;
    line-height: 3rem;
    text-align: left;
    border-radius: 10px;
    margin: 3rem -1rem 2rem;
    padding: 10px;
}
@media screen and (min-width: 1000px){
  .maintxt h3{
    text-align: center;
  }
}
.maintxt h3::after{
  content: '';
  border-top: 10px solid #039BE5;
  position: absolute;
  border-right: 10px solid transparent;
  border-left: 10px solid transparent;
  bottom: -10px;
  left: calc(50% - 10px);
}
.maintxt h4{
  color: #039BE5;
  background: rgb(5 155 229 / 5%);
  font-size: 2rem;
  font-weight: bold;
  border-top: 2px solid #039BE5;
  border-bottom: 2px solid #039BE5;
  padding: 10px;
  margin: 30px 0 10px;
}
.maintxt h5{
  color: #004986;
  font-size: 1.8rem;
  font-weight: bold;
  margin-top: 1rem;
}
.maintxt h5::before{
  content: "";
  display: inline-block;
  vertical-align: middle;
  width: 1rem;
  height: 1rem;
  margin-right: .5rem;
  border-radius: 100%;
  background: #004986;
}
.maintxt b{
  color: #039BE5;
  font-size: 1.8rem;
}
.maintxt .description{
    display: block;
    background: #eee;
    font-size: 1.4rem;
    border: 1px solid rgb(5 155 229 / 30%);
    border-radius: 1rem;
    width: 100%;
    padding: 1rem;
    text-align: left;
    overflow: visible;
    margin: 3rem auto;
    position: relative;
}
@media screen and (min-width: 1000px){
  .maintxt .pfl{
    float: left;
    padding: 0 2rem 2rem 0;
  }
  .maintxt .pfr{
    float: right;
    padding: 0 0 2rem 2rem;
  }
}
/*
.maintxt h5{
  position: relative;
  display: block;
  color: #059be5;
  font-weight: bold;
  font-size: 2rem;
  margin-top: 20px;
}
.maintxt h5::before{
  content: '';
  display: inline-block;
  vertical-align: middle;
  width: 8px;
  height: 24px;
  margin-right: 8px;
  background: #039BE5;
  border-radius: 4px;
}*/
.maintxt p{
      margin-bottom: 1.2em;
}
.maintxt a{
  text-decoration: underline;
}
.maintxt .prevnext{
  display: flex;
  justify-content: space-between;
  margin: 3rem 0;
}
.maintxt .prevnext a{
  padding: 1rem 2rem;
  color: #fff;
  font-weight: 700;
  background: #004986;
  border-radius: 25px;
}
.maintxt .prevnext p.prev,
.maintxt .prevnext p.next{
  color: #888;
  background: #eeeeee;
  padding: 1rem 2rem;
  font-weight: 700;
  border-radius: 25px;
}
.maintxt .prevnext .clear{
  opacity: 0;
}

.maintxt .prevnext a.prev::before{
  content: "";
  border: 5px solid transparent;
  border-right-color: #fff;
  display: inline-block;
  margin-right: 1rem;
}
.maintxt .prevnext a.next::after{
  content: "";
  border: 5px solid transparent;
  border-left-color: #fff;
  display: inline-block;
  margin-left: 1rem;
}
.maintxt blockquote{
  background: #ebeff3;
  position: relative;
  border-radius: 10px;
  margin: 10px 0 10px;
  padding: 10px 10px 2px;
}
.maintxt table{
  border-collapse: collapse;
}
.maintxt th,
.maintxt td{
  padding: 10px;
  border: 1px solid #ccc;
  word-break: break-all;
}
.maintxt th{
  background: #ebeff3;
}
.maintxt ul,
.maintxt ol{
  margin: 1rem 0 2rem 2rem;
}
.maintxt ol{
  list-style: decimal;
}
.maintxt ul{
  list-style: square;
}
.maintxt ol li,
.maintxt ul li{
  margin-top: .8rem;
}
.maintxt ul#mokuji{
  padding: 0 0 15px 5px;
  list-style: none;
}
.maintxt ul#mokuji li{
  padding: .5rem;
}
.maintxt ul#mokuji li::before{
  content:"▼";
  color: #004986;
  font-size: 1rem;
  display: inline-block;
  vertical-align: middle;
}
.maintxt ul#mokuji li a{
  color: #004986;
}
.bl-ttlmn{
  max-width: 870px;
  margin: 0 auto;
  padding: 1.5rem 0 ;
}
.bl-ttlmn img{
  width: 6.5rem;
  height: 6.5rem;
  border: .4rem solid;
  border-radius: 100%;
  vertical-align: middle;
  display: none;
  margin: -2rem 0rem;
}
@media screen and (min-width: 1000px){
  .bl-ttlmn img{
  display: inline-block;
    margin: -2rem 0rem;
  }
}
.bl-ttlmn .h1ttl{
  line-height: 2.7rem;
  text-align: left;
}
@media screen and (min-width: 1000px){
  .bl-ttlmn .h1ttl{
    text-align: center;
  }
}
.detail div.h1ttl{
  display: block;
  margin-bottom: 4rem;
}
#post-logic h1.h1ttl,
#post-logic h2{
  color:#2390d3;
}
#post-psycho h1.h1ttl,
#post-psycho h2{
  color:#fb5000;
}
#post-psycho .bl-cat,
#post-psycho h3,
#post-psycho .prevnext a{
  background:#ff7000;
}
#post-psycho h3::after{
  border-top: 10px solid #ff7000;
}
#post-psycho h4{
  color: #ff7000;
  background: rgb(255 112 0 / 3%);
  border-top: 2px solid #ff7000;
  border-bottom: 2px solid #ff7000;
}
/*
#post-psycho h5::before{
  background: #ff7000;
}*/

.story .h2ttl{color: #057ae4;font-size: 2.4rem;font-weight: 700;padding: 30px 0 10px;}
.story .flbox,.factory .flbox {flex-direction: row;}
.story .bl-block {background: #ebeff3;display: inline-block;vertical-align: top;width: calc(50% - 10px);text-align: left;padding: 10px;border: 2px solid #ebeff3;border-radius: 10px;box-sizing: border-box;position: relative;}
.story .bl-block h3{color: #004986;font-weight: 700;}
.story .bl-block h3 img{background-position: center center;background-size: contain;background-repeat: no-repeat;background-color: #fff;width: 200px;height: 150px;border-radius: 10px;vertical-align: middle;margin: 0 auto 10px;}
.story .wp-caption{margin: 1rem auto;}
.story .img-area-in{text-align: center;padding: 1rem;}
.story .bl-block.ng {background: #ddd;border-color: #ddd;opacity: .7;pointer-events: none;}

@media screen and (min-width: 1000px){
.story .bl-block {width: 220px;}
.story.detail .bl-cat{margin: 0 auto;transform: translateX(50%);}
}

.factory .bl-block h3 img{background-size: cover;}
.p-comic{margin: 0px auto;}
.p-comic img{margin-top: 40px;}

@media screen and (min-width: 1000px){
.p-comic{width: 500px;}
}

.profile{
  padding: 2rem;
  background: #f3f2eb;
  border-radius: 10px;
  display: inline-block;
  width: auto;
  text-align: left;
  margin: 1rem auto;
}
.profile img{
  float: left;
  width: 120px;
  height: auto;
  margin: 0 2rem 2rem 0;
  border-radius: 100%;
}
.profile .fukidashi{
  background: #fff;
  display: inline-block;
  padding: .4rem 1rem;
  border-radius: 1rem;
  margin-bottom: .5rem;
}
.profile .p_name{
  font-size: 2rem;
    margin-bottom: .5rem;
}

.center{
  text-align: center;
  margin: 20px auto;
}
.center img{
  margin: 20px auto 0;
  display: block;
}

.bl-article.a_622,
.bl-article.a_405{
  display: none;
}


#sidebar .sd_logic h3,
#sidebar .sd_psycho h3{
  padding: 0;
}
#sidebar .sd_logic li,
#sidebar .sd_psycho li{
  min-height: auto;
}
.sd_logic a,
.sd_psycho a{
  font-size: 1.5rem;
}

/* 出版書籍 */
#post-publication_books h2{margin: 2emem 0 1em 0;color: #004986;font-size: 1.8rem;font-weight: 700;}

