@charset "UTF-8";

/* =====================================
	works_detail
===================================== */
.visual {
  height: 200px; }
  .visual .inner {
    height: 200px; }
    .visual .inner h1 {
      position: relative;
      left: 0;
      z-index: 2;
      text-align: center; }

/* =======.works_detail ========== */
.works_detail {
  width: 100%;
  padding: 66px 40px clamp( 30px, calc( 18px + 3.2vw ), 50px ) 40px;
  position: relative; }
  .works_detail::before {}
  .works_detail .inner {
    width: 1100px;
    max-width: 100%;
    margin: 0 auto;
    position: relative;
    z-index: 10;
    box-sizing: border-box; }
    .works_detail .inner h2 {
      font-size: 48px;
      color: #0086d1;
      font-weight: bold;
      letter-spacing: 0.1em;
      text-align: center; }
    .works_detail .inner h3 {
      color: #fff;
      text-align: left;
      background-color: #0086D1;
      padding: 0.2em 1em;
      font-size: 23px;
      font-weight: bold;
      letter-spacing: 0.1em;
      margin-top: 50px; }
    .works_detail .inner .col2 {
      display: flex;
      text-align: left;
      justify-content: space-between;
      align-items: flex-start;
      position: relative;
      z-index: 2; }
      .works_detail .inner .col2 figure,
      .works_detail .inner .col2 figcaption {
        margin: 0;
        padding: 0;}
      .works_detail .inner .col2 figcaption {
        font-size:13px; }
      .works_detail .inner .col2 figure {
        width: 43%;
        margin-top: 50px; }
        .works_detail .inner .col2 figure img {
          width: 100%;
          height: auto;
          margin-bottom: 0.5em; }
      .works_detail .inner .col2 .table_wrap {
        width: 53%; }
      .works_detail .inner .col2 table {
        width: 100%;
        background-color: #fff;
        border-collapse: collapse;
        border-spacing: 0;
        margin-top: 50px; }
        .works_detail .inner .col2 table th, .works_detail .inner .col2 table td {
          border: 1px solid #E0E0E0;
          padding: 15px; }
        .works_detail .inner .col2 table th {
          color: #0086D1;
          background-color: #F4F6F7;
          text-align: center;
          white-space: nowrap; }
        .works_detail .inner .col2 table td a {
          text-decoration: underline; }
      .works_detail .inner .col2 .inBox {
        width: 48%; }
        .works_detail .inner .col2 .inBox ul, .works_detail .inner .col2 .inBox p, .works_detail .inner h3 + p {
          padding: 1em; }
          .works_detail .inner .col2 .inBox ul li {
            margin-top: 0.5em; }
    .works_detail .inner dl {
      display: flex;
      flex-flow: row wrap;
      margin-top: 1em; }
      .works_detail .inner dl dt {
        width: 10%;
        margin-top: 0.1em; }
        .works_detail .inner dl dt time {
          color: #808080;
          font-size: 14px; }
      .works_detail .inner dl dd {
        width: 90%;
        margin-top: 0.1em; }
        .works_detail .inner dl dd a {
          text-decoration:underline;
          color: #808080;
          font-size: 14px; }
        .works_detail .inner dl dd a:hover {
          opacity:0.6; }

.works_detail-cvBtn {
  margin-top:80px;
  background-color: #F4F6F7;
  text-align: center; }
  .works_detail-cvBtn .inner {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    position: relative;
    padding: 90px 0; }
    .works_detail-cvBtn .inner .comBtn01 {
      max-width: 100%;
      width: 640px;
      line-height: 1.45; }

.roboken {
	margin-top: 30px;
	text-align: right;
}

.roboken a {
	padding: 15px 15px 15px 15px;
	display: inline-block;
	border: #DADADA 1px solid;
	border-radius: 10px;
	font-size: 1.4rem;
	text-align: center;
	line-height: 1;
	background-color: #FFFFFF;
}

.roboken img {
	max-width: 180px;
}

.roboken p {
	margin-top: 10px;
	padding-right: 20px;
	display: inline-block;
	line-height: 1;
    background-image: url("../img/link_icon.png");
	background-repeat: no-repeat;
	background-position: center right;
    background-size: 15px;
}


@media screen and (max-width: 767.9px) {
  /* =======.visual ========== */
  .visual {
    height: 130px; }
    .visual .inner {
      height: 130px; }

  /* =======.works_detail ========== */
  .works_detail {
    padding: 10.133vw 5.33vw 0 5.33vw; }
    .works_detail::before {
      height: 102.67vw;
      top: 13.6vw;
      clip-path: polygon(0 42.4vw, 100% 0%, 100% calc(100% - 42.4vw), 0% 100%); }
    .works_detail .inner h2 {
      font-size: 2.8rem; }
    .works_detail .inner h3 {
      padding: 0.5em 1em;
      font-size: 1.5rem;
      margin-top: 20px; }
    .works_detail .inner .col2 {
      flex-flow: row wrap; }
      .works_detail .inner .col2 figure {
        width: 100%;
        margin-top: 30px; }
        .works_detail .inner .col2 figure figcaption {
          font-size: 2vw;}
      .works_detail .inner .col2 .table_wrap {
        width: 100%; }
      .works_detail .inner .col2 table {
        width: 100%;
        margin-top: 30px;
        margin-bottom: 20px; }
        .works_detail .inner .col2 table th, .works_detail .inner .col2 table td {
          padding: 10px;
          border-left: none;
          border-right: none; }
      .works_detail .inner .col2 .inBox {
        width: 100%; }
        .works_detail .inner .col2 .inBox ul, .works_detail .inner .col2 .inBox p {
          padding: 1em; }
          .works_detail .inner .col2 .inBox ul li {
            margin-top: 0.5em; }
    .works_detail .inner dl {
      margin-top: 0;}
      .works_detail .inner dl dt {
        width: 100%;
        margin-top: 1em; }
        .works_detail .inner dl dt time {
          font-size: 1.5rem; }
      .works_detail .inner dl dd {
        width: 100%; }
        .works_detail .inner dl dd a:hover {
          opacity:1; }
.works_detail-cvBtn {
  margin-top:50px;}
  .works_detail-cvBtn .inner {
    box-sizing: border-box;
    padding: 50px 5.33vw; }

.roboken {
	text-align: center;
}

.roboken a {
	display: -webkit-box;
	display: flex;
	-webkit-box-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	align-items: center;
}

.roboken img {
	max-width: 160px;
	-webkit-box-flex: 0;
	flex-grow: 0;
}

.roboken p {
	margin-top: 0;
	margin-left: 15px;
	-webkit-box-flex: 0;
	flex-grow: 0;
}

}