@charset "UTF-8";

/* common */
.bg {
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  height: 360px;
}

#desc_agency .description {
  margin: 24px 0 0;
}

/* topic */
#topic {
  padding: 80px 0 0;
}

#topic .wrapper_contents_all_posts {
  width: 1200px !important;
}

#topic .each_post {
  width: calc((100% - 4%) / 3) !important;
}

#topic .each_post:last-of-type {
  margin-right: 0;
}

#topic .each_post:nth-last-of-type(3),
#topic .each_post:nth-last-of-type(2),
#topic .each_post:nth-last-of-type(1) {
  margin-bottom: 0;
}

/* titles */
.wrapper_title_posts {
  width: 1200px !important;
}

/* main content */
#desc_agency {
  margin: 140px auto 0;
  width: 1200px;
}

#desc_agency .cover {
  width: 100%;
}

#desc_agency .summary {
  margin: 0 auto;
  padding: 48px;
}

#desc_agency .wrapper_info {
  letter-spacing: -.4em;
}

#desc_agency .thumbnail {
  width: 160px;
  height: 160px;
  display: inline-block;
  letter-spacing: normal;
  vertical-align: middle;
}

#desc_agency .wrapper_agency {
  display: inline-block;
  letter-spacing: normal;
  vertical-align: middle;
  margin-left: 24px;
  width: calc(100% - 184px);
}

#desc_agency .name_agency {
  margin-bottom: 16px;
}

#desc_agency .additional_info {
  padding: 32px;
  position: relative;
  margin-top: 40px;
}

#desc_agency .additional_info:after {
  position: absolute;
  content: '';
  display: block;
  top: -22px;
  left: 32px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 16px 22px 16px;
  border-color: transparent transparent #f5f5f5 transparent;
}

#desc_agency .additional_info .description {
  margin: 16px 0 0;
}

#desc_agency .wrapper_features {
  display: -webkit-flex;
  display: flex;
}

#desc_agency .features {
  width: 64%;
  margin-top: 100px;
  padding: 48px;
}

#desc_agency .each:after {
  display: block;
  content: '';
  margin: 40px 0;
  border-bottom: solid 1px #ddd;
}

#desc_agency .each:last-child:after {
  border-bottom: none;
  margin: 0;
}

/* sidemenu */
#desc_agency .outline {
  width: 28%;
  margin-left: 8%;
}

#desc_agency .inner {
  position: -webkit-sticky;
  position: sticky;
  top: 0px;
  padding-top: 100px;
}

#desc_agency .headline_outline {
  font-size: 15px;
  padding-top: 48px;
}

#desc_agency .company_outline {
  margin-top: 16px;
}

#desc_agency .wrapper_outline {
  margin-top: 32px;
}

#desc_agency .wrapper_icon {
  width: 40px;
  margin-right: 12px;
}

#desc_agency .address_outline {
  margin-bottom: 16px;
  display: -webkit-flex;
  -webkit-align-items: center;
  display: flex;
  align-items: center;
}

#desc_agency .address_outline:last-of-type {
  margin-bottom: 0;
}

#desc_agency .text_outline {
  font-size: 13px;
  width: calc(100% - 52px);
}

#desc_agency .link_outline {
  font-size: 13px;
  text-decoration: underline;
  width: calc(100% - 52px);
}

/*---------------------------------------------------------------*\
$1200px
\*---------------------------------------------------------------*/
@media screen and (max-width: 1200px) {

  /* main content */
  #desc_agency {
    width: 93%;
  }

  /* titles */
  .wrapper_title_posts {
    width: 93% !important;
  }

  /* topics */
  #topic .wrapper_contents_all_posts {
    width: 93% !important;
  }
}

/*---------------------------------------------------------------*\
$1080px
\*---------------------------------------------------------------*/
@media screen and (max-width: 1080px) {

  /* topic */
  #topic .each_post {
    width: calc((100% - 6%) / 3) !important;
  }
}

/*---------------------------------------------------------------*\
$860px
\*---------------------------------------------------------------*/
@media screen and (max-width: 1000px) {

  /* main content */
  #desc_agency .wrapper_features {
    -webkit-flex-direction: column;
    flex-direction: column;
  }

  #desc_agency .features {
    width: 100%;
  }

  /* sidemenu */
  #desc_agency .outline {
    width: 100%;
    margin-left: 0;
  }

  #desc_agency .inner {
    border-bottom: solid 1px #ddd;
    padding-bottom: 48px;
  }

  /* topics */
  #topic .each_post {
    width: calc(96% / 2) !important;
  }

  #topic .each_post:nth-last-of-type(3) {
    margin-bottom: 4%;
  }

  #topic .each_post:nth-last-of-type(2),
  #topic .each_post:nth-last-of-type(1) {
    margin-bottom: 0;
  }
}

/*--------------------------------------------------------------*\
$600px
\*---------------------------------------------------------------*/
@media screen and (max-width: 600px) {

  /* common */
  #desc_agency .description {
    margin: 16px 0 0;
  }

  /* main content */
  #desc_agency {
    margin-top: 68px;
  }

  #desc_agency .thumbnail {
    width: 100px;
    height: 100px;
  }

  #desc_agency .thumbnail {
    width: 80px;
    height: 80px;
  }

  #desc_agency .wrapper_agency {
    width: calc(100% - 96px);
    margin-left: 16px;
  }

  #desc_agency .name_agency {
    margin-bottom: 8px;
  }

  #desc_agency .summary {
    padding: 16px;
  }

  #desc_agency .features {
    padding: 24px 16px;
    margin-top: 64px;
  }

  #desc_agency .additional_info {
    padding: 20px;
  }

  #desc_agency .each:after {
    margin: 28px 0;
  }

  /* sidemenu */
  #desc_agency .headline_outline {
    padding: 0;
    border-top: none;
    font-size: 13px;
  }

  #desc_agency .inner {
    padding: 72px 3.5%;
  }

  #desc_agency .wrapper_outline {
    margin-top: 24px;
  }

  #desc_agency .wrapper_icon {
    width: 32px;
  }

  /* topic */
  #topic {
    padding: 56px 0 0;
  }

  #topic .each_post {
    width: 100% !important;
  }
}