@charset "UTF-8";

/* top
========================================*/


/* --- header --- */

.header_shiburaba {
  display: none;
}


/* --- main title --- */

h1 {
  display: block;
  max-width: 864px;
  height: auto;
  margin: -75px auto 0 auto;
}

h1 img {
  height: auto;
}


/* --- lead --- */

.lead {
  position: relative;
  margin: 6% 10% 8% 10%;
  padding: 0;
  background: none;
  flex-shrink: 0;
}

.lead::before {
  content: '';
  position: absolute;
  left: 0;
  display: block;
  width: 100%;
  height: 2px;
  background: url(../common/img/border_dot_color.png);
  background-size: cover;
}

.lead::after {
  content: '';
  position: absolute;
  left: 2;
  bottom: 2px;
  display: block;
  width: 100%;
  height: 2px;
  background: url(../common/img/border_dot_color.png);
  background-size: cover;
}

.lead p {
  position: relative;
  font-size: 2.0rem;
  font-weight: bold;
  padding: 4% 0 4% 16%;
}

.lead p::before {
  content: '';
  position: absolute;
  top: 8%;
  left: -4%;
  right: 0;
  background: url(../img/logo_shiburaba-face.png);
  background-size: cover;
  width: 120px;
  height: 100px;
}

.lead p small {
  font-size: 1.4rem;
}


/* --- mc --- */

.mc {
  padding: 2% 10% .6%;
  background-color: rgba(255, 255, 255, 0.7);
}

.mc .h_title {
  position: absolute;
  width: 132px;
  height: auto;
  top: -20px;
  left: -60px;
}

.mc p {
  font-size: 1.6rem;
  line-height: 1.8;
}

.mc .position {
  position: relative;
  font-size: 1.4rem;
  color: #fff;
  line-height: 1.4;
  margin: 0;
  padding: .2em 1.8em .3em .6em;
  background-color: #00a8ff;
}

.mc .position::after {
  position: absolute;
  top: 0;
  right: 0;
  content: '';
  display: block;
  width: 8%;
  height: 100%;
  background-color: #00eaff;
}

.mc .photo {
  width: 200px;
  height:200px;
  object-fit: cover;
  border-radius: 50%;
  /* object-position: 0px 0px; */
  margin: 0 0 2% 8%;
}

.mc .name {
  font-size: 2.2rem;
  font-weight: bold;
  margin: 0 0 .2em;
  overflow: hidden;
}

.mc .txt {
  font-size: 1.4rem;
  margin: 0 0 .6em;
  overflow: hidden;
}

.mc a.ex-link {
  position: relative;
  display: flex;
  align-items: center;
  font-size: 1.6rem;
  color: #00a8ff;
  background: none;
}

.mc ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-top: -6%;
}

.mc li {
  width: 46%;
  margin-bottom: 24px;
}

.mc li:last-child {
  margin-bottom: 0;
}


/* --- articles --- */

.articles {
  margin-top: 8%;
  padding: 0;
}

.articles .h_title {
  position: absolute;
  width: 326px;
  height: auto;
  top: -40px;
  left: -60px;
}


/* --- article_tags --- */

.articles .article_tags {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 32px;
  padding: 7% 10% 1.6%;
  background-color: rgba(255, 255, 255, 0.4);
}

.articles .article_tags {
  display: flex;
}

.articles .article_tags li {
  display: inherit;
  margin-bottom: .8em;
}

.articles .article_tags li a {
  font-size: 1.6rem;
  letter-spacing: -.04em;
  margin-right: .4em;
  padding: .5em .7em;
  background-color: #fff;
  border: 1px solid #ececec;
}

.articles .article_tags li a::before {
  content: "#";
  margin-right: .2em;
}

.articles .article_tags li:first-child a {
  color: #fff;
  background-color: #ff6100;
}

.articles .article_tags li a:hover {
  color: #fff;
  background-color: #ff7e00;
  opacity: 1;
}


/* --- article_list --- */

.articles .article_list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.articles .article_list li {
  width: 46%;
  margin-bottom: 4%;
}

.articles .article_list li img {
  width: 100%;
  height: auto;
}

.articles .article_list li p.article_title {
  font-size: 2.4rem;
  line-height: 1.4;
  font-weight: bold;
  margin: .3em 0 0;
}

.articles .article_list li p.article_title:first-letter {
  color: #ff6100;
}

/* article_info */

.article_info {
  margin: .6em 0 0;
}

.article_info ul.tags {
  flex-wrap: wrap;
}

.article_info ul.tags li {
  width: auto;
  margin-bottom: .6em;
}

.article_info ul.tags li a {
  padding: 0.5em 0.5em;
}

.article_info ul.tags li p.date {
  font-size: 2rem;
  line-height: 1;
  letter-spacing: -0.04em;
  font-family: "Geo", sans-serif;
  margin: 0 .6em 0 0;
}

.article_info ul.tags li .article_tags {
  margin: 0;
  padding: .8em 0;
  background: none;
}

.article_tags li {
  width: auto;
  margin-bottom: .8em;
}

.article_tags li a {
  font-size: 1.3rem;
}

.article_tags li:first-child a {
  color: #000;
  background-color: #fff;
}

.article_tags li:first-child a:hover {
  color: #fff;
  background-color: #ff7e00;
}


@media screen and (max-width: 1440px) {

  h1 {
    width: 64%;
    margin: -7% auto 0 auto;
  }


  /* --- lead --- */

  .lead {
    margin: 6% 0 8%;
    padding: 0;
  }

}


@media screen and (max-width: 1080px) {

  .header_inner h1 {
    width: auto;
  }

  h1 {
    width: 100%;
    margin: .8% auto 0 auto;
  }

  .mc {
    margin-top: 10%;
  }

  .mc ul {
    margin-top: -10%;
  }


  /* --- articles --- */

  .articles {
    margin-top: 10%;
  }


  /* --- article_tags --- */

  .articles .article_tags {
    padding: 12% 6% 2%;
  }

}


@media screen and (max-width: 768px) {

  .title_pc {
    display: none;
  }

  .header_inner h1 {
    width: auto;
    margin: 0;
    padding: 0;
  }

  .header_shiburaba {
    display: block;
  }


  /* --- lead --- */

  .lead {
    margin: 10% 3%;
  }

  .lead p {
    position: relative;
    font-size: 1.6rem;
    line-height: 1.86;
    font-weight: bold;
    margin: 14% 3% 16% 3%;
    padding: 8% 0 8% 0;
  }
  
  .lead p::before {
    top: -5%;
    right: -2.4%;
    left: auto;
    width: 100px;
    height: 85px;
  }


  /* --- mc --- */

  .mc {
    margin-top: 24%;
    padding: 12% 6% 4%;
  }

  .mc .h_title {
    width: 120px;
    top: -46px;
    left: 0;
  }

  .mc ul {
    display: block;
  }

  .mc li {
    width: 100%;
  }

  .mc .photo {
    display: block;
    width: 184px;
    height:184px;
    margin: 0 auto 2% auto;
  }


  /* --- articles --- */

  .articles {
    margin-top: 16%;
  }

  .articles .h_title {
    width: 248px;
    top: -40px;
    left: 0;
  }


  /* --- article_list --- */

  .articles .article_list {
    display: block;
    padding:  0 6% 0;
  }

  .articles .article_list li {
    width: 100%;
    margin-bottom: 6%;
  }

  .articles .article_tags li {
    margin-bottom: .8em;
  }

  .article_info ul.tags li:first-child {
    margin-left: 9em;
  }

  .articles .article_tags li a {
    font-size: 1.3rem;
    letter-spacing: -.04em;
    margin-right: .4em;
  }

  .article_info {
    padding: 0 0 0;
  }

  .article_info p.date {
    margin-top: 0.08em;
    margin-right: .4em;
  }

}